margin,padding,borderイメージ

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プロパティを連続で指定した場合も同様です。

  1. 正の値のマージン同士は値が大きい方が適用。
  2. 負の値のマージン同士は負の値が大きい方が適用。
  3. 正と負の値のマージンは足し算で値が算出され適用。

例)

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>	

上記のHTMLファイル

h2、h3、p要素各行の間隔(白背景)がmargin-top、margin-bottomのエリアです。
h2要素のmargin-bottomと、h3要素のmargin-topが、ルール1により、10pxが適用され、h3要素のmarigin-bottomと、p要素のmargin-topが同じくルール1により、20pxが適用されています。