margin：要素の外側の余白をまとめて指定する

marginプロパティの説明

marginは、要素の外側の余白をまとめて指定します。具体的には、CSSのボックス・モデルにおけるマージン・ボックス（Margin box）の寸法を定義するものです。

要素を配置すると、そこに四角形のボックスが生成されます。marginは、その四辺全ての外側に作成される余白を一括で制御できるショートハンド・プロパティです。各値は共通の寸法を指定することも、個別に指定することも可能です。その祭、記述する値の数によって対応する辺の位置が決まります。

• 値を1つ指定した場合は、4つの辺全てに同じマージンが適用される
• 値を2つ指定した場合は、1つ目の値が上下、2つ目の値が左右に適用される
• 値を3つ指定した場合は、1つ目の値が上、2つ目の値が左右、3つ目の値が下に適用される
• 値を4つ指定した場合は、1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左に適用される

負の値を指定すると、要素を重ねることもできます。各辺の値を個別に指定する場合は、以下のプロパティを使用して下さい。

• 上辺のマージン：margin-top
• 右辺のマージン：margin-right
• 下辺のマージン：margin-bottom
• 左辺のマージン：margin-left

CSSのマージンについて正しく理解したい方は、余白に関するリファレンスを参照して下さい。

marginに指定できる値

<length>

CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。

<percentage>

マージンの寸法を包含ブロックの幅（width）を基準に割合（%）で表します。

auto

ブラウザの自動計算を採用します。要素の左右にこの値を指定すると、均等に余白を分配するため中央に寄せられて配置されます。

marginの使い方とサンプル

marginプロパティの構文は以下の通りです。

/* 四辺共通 */
margin: 10px;
margin: 1rem;
margin: -24mm;

/* 上下 | 左右 */
margin: 10px auto;
margin: 5% auto;

/* 上 | 左右 | 下 */
margin: 1rem auto 10px;
margin: auto 10px 1rem;

/* 上 | 右 | 下 | 左 */
margin: 10px 24px 0 auto;
margin: 0 auto 5% 1rem;

/* グローバル値 */
margin: inherit;
margin: initial;
margin: revert;
margin: unset;

marginの実例

それでは実際にmarginプロパティの書き方を見ていきましょう。以下の例は、背景色を白く塗った<div>要素の中に<p>要素を配置して、マージンの値を変えた時の比較です。<p>要素にも背景色が指定されており、余白の違いを確認できます。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	overflow: auto;
	margin-top: 1rem;
	background: #fff;
}
.samp_box p {
	margin: 0;
	padding: .5rem;
	background-color: #09f;
	color: #fff;
}
#margin_1 {
	margin: auto;
}
#margin_2 {
	margin: 10px;
}
#margin_3 {
	margin: 10px 10%;
}
#margin_4 {
	margin: 10px 10% 2rem;
}
#margin_5 {
	margin: 10px 10% 2rem 0;
}

<section class="samp_box">
	<div>
		<p id="margin_1">margin: auto;</p>
	</div>
	<div>
		<p id="margin_2">margin: 10px;</p>
	</div>
	<div>
		<p id="margin_3">margin: 10px 10%;</p>
	</div>
	<div>
		<p id="margin_4">margin: 10px 10% 2rem;</p>
	</div>
	<div>
		<p id="margin_5">margin: 10px 10% 2rem 0;</p>
	</div>
</section>

マージンが効かない時の原因と対処方法

親要素に包含されている要素、あるいは他の要素と隣接する要素に対してmarginを指定した場合に、画面に反映されない事があります。特に、この現象は上下方向のマージンで発生します。

要素のボックスはあくまで仮想領域であるため、何らかの内容物や描画されて可視化するものがなければ、マージンの干渉材料となりえません。そのため、単なる入れ子構造の階層の一部であるボックスを用いる場合に、マージンが機能するように一工夫を加える必要があります。

以下の内容は、入れ子構造の子要素にmarginを指定した場合に、上下の方向だけが無効になってしまう現象を解消するための方法です。それぞれの方法には一長一短があります。例えば、paddingやborderは有効な寸法を明記しなければ機能しないため、厳密な寸法に影響を与えます。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	margin-top: 1rem;
	background: #fff;
}
.samp_box p {
	margin: 1rem;
	padding: .5rem;
	background-color: #09f;
	color: #fff;
}
#item_2 {
	overflow: auto;
}
#item_3 {
	padding: .1px;
}
#item_4 {
	border: 1px solid #333;
}

<section class="samp_box">
	<div id="item_1">
		<p>親要素に何も指定しないと上下の余白が折りたたまれる</p>
	</div>
	<div id="item_2">
		<p>親要素に overflow を指定</p>
	</div>
	<div id="item_3">
		<p>親要素に padding を指定</p>
	</div>
	<div id="item_4">
		<p>親要素に border を指定</p>
	</div>
</section>