いまさらHTML,CSS入門講座 | CSS｜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が適用されています。