
CSSでは、要素が生成する範囲をボックス(Box)と言います。
marginプロパティ
上下左右のマージン領域(上図参照)を指定します。最も外側の領域で、他の要素との境となる領域です。値は、%(パーセント)や、長さで指定します。また、まとめの値の指定は、半角スペースで区切ります。
値のまとめ指定
marginプロパティの引数は 1~4個指定が可能で、それぞれ、下のように解釈されます。
margin: 1px 2px 1px 1px; margin: 1px 2px 1px; margin: 1px 2px; margin: 1px; 上 1px、右 2px、下 1px、左 2px 上 1px、左右 2px、下 1px 上下 1px、左右 2px 上下左右 1px
上下左右のマージン(余白)を個別に指定するプロパティ
- margin-top(上辺)
- margin-right(右辺)
- margin-bottom(下辺)
- margin-left(左辺)
マージンの相殺
h*要素や、p要素など、上下に空白を自動で挿入するブロック要素が連続する場合、下記ルールによって、マージンの相殺が行われます。また、marginプロパティを連続で指定した場合も同様です。
- 正の値のマージン同士は値が大きい方が適用。
- 負の値のマージン同士は負の値が大きい方が適用。
- 正と負の値のマージンは足し算で値が算出され適用。
例)
h2 { margin: 10px 0px; background-color: darkkhaki; } h3{ margin: 10px 0px; background-color: darkkhaki; } p{ margin: 20px 0px; background-color: darkkhaki; } 本文) <h2>...</h2> <h3>...</h3> <p>...</p>
h2、h3、p要素各行の間隔(白背景)がmargin-top、margin-bottomのエリアです。
h2要素のmargin-bottomと、h3要素のmargin-topが、ルール1により、10pxが適用され、h3要素のmarigin-bottomと、p要素のmargin-topが同じくルール1により、20pxが適用されています。