marginプロパティ
marginプロパティの概要
機能 |
要素のマージンを定義 |
指定可能な値 |
長さ, パーセント |
初期値 |
なし |
継承 |
しない |
適用可能なボックス |
全て |
marginプロパティは、要素のマージン(余白)を定義します。marginプロパティの余白は、paddingプロパティとは違い、ボーダーの外側の余白を定義します。また、余白部分は、ネストされる要素の背景色が適用されます。
尚、marginプロパティを指定しない場合は、マージンは取られません(「margin:0」ということになります。)。
example.css
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 |
継承 |
しない |
適用可能なボックス |
全て |
example2.css
h2, h3, h4, h5 {
border: 1px solid #000;
}
h2 {
margin-top: 80px;
}
h3 {
margin-right: 80px;
}
h4 {
margin-bottom: 80px;
}
h5 {
margin-left: 80px;
}