marginプロパティ
marginプロパティの概要
| 機能 |
要素のマージンを定義 |
| 指定可能な値 |
長さ, パーセント |
| 初期値 |
なし |
| 継承 |
しない |
| 適用可能なボックス |
全て |
marginプロパティは、要素のマージン(余白)を定義します。marginプロパティの余白は、paddingプロパティとは違い、ボーダーの外側の余白を定義します。また、余白部分は、ネストされる要素の背景色が適用されます。
尚、marginプロパティを指定しない場合は、マージンは取られません(「margin:0」ということになります。)。
h3 {
margin: 40px;
}
div {
margin: 30px;
border: 1px solid #000;
}
li {
border: 1px solid #000;
}
上下左右のマージンを個別で指定するために、次のようなプロパティも用意されています。
| プロパティ名 |
機能 |
| margin-top |
要素の上側のマージンの定義 |
| margin-right |
要素の右側のマージンの定義 |
| margin-bottom |
要素の下側のマージンの定義 |
| margin-left |
要素の左側のマージンの定義 |
margin-top、margin-right、margin-bottom、margin-leftプロパティの概要
| 機能 |
要素のマージンを上下左右で個別に定義 |
| 指定可能な値 |
長さ, パーセント |
| 初期値 |
0 |
| 継承 |
しない |
| 適用可能なボックス |
全て |
h2, h3, h4, h5 {
border: 1px solid #000;
}
h2 {
margin-top: 80px;
}
h3 {
margin-right: 80px;
}
h4 {
margin-bottom: 80px;
}
h5 {
margin-left: 80px;
}
|