CSS ・ 余白・サイズ
margin
外側の余白
要素の外側に余白をとります。上下左右をまとめて、または個別に指定でき、auto を使うと中央寄せにも使えます。
01
サンプルコード
HTML
1<div class="box">margin: 24px</div>
2<div class="box center">margin: 24px auto</div>
CSS
1.box {
2 margin: 24px;
3 padding: 12px;
4 background: #f6ead8;
5 border: 1px solid #b68235;
6}
7.center {
8 width: 220px;
9 margin: 24px auto;
10}
02
実行結果
ブラウザでの表示
03
解説
margin は要素の枠線（border）より外側の余白です。内側の余白は padding で指定します。
値を1〜4つ並べて指定でき、4つの場合は「上・右・下・左」の時計回りになります。1方向だけ指定するときは margin-top・margin-right・margin-bottom・margin-left を使います。
上下に並んだ要素どうしの margin は足し算されず、大きいほうだけが適用されます。これをマージンの相殺といいます。たとえば上下に margin: 100px を指定した要素を2つ並べると、間隔は 100px + 100px = 200px ではなく 100px になります。左右の margin や、Flexbox・Grid の子要素どうしでは相殺は起こりません。
幅が決まったブロック要素に margin: 0 auto を指定すると、左右の余白が均等に計算され、水平方向の中央に配置されます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
margin: 16px; | 上下左右すべてに16px |
margin: 8px 16px; | 上下に8px、左右に16px |
margin: 8px 16px 24px; | 上に8px、左右に16px、下に24px |
margin: 1px 2px 3px 4px; | 上・右・下・左の順（時計回り） |
margin-top / -right / -bottom / -left | 1方向だけ指定（上・右・下・左のマージン） |
auto | 余白を自動計算する。左右に使うと中央寄せ |
margin-top: -8px; | 負の値で要素を引き寄せる |
要素を水平方向の中央に寄せる
手順は2つ。①width を設定する ②margin-right と margin-left に auto を設定する。auto は「状況に応じて自動で値を調整する」という意味で、左右の余白が均等に計算されます。
CSS
1.box {
2 width: 400px;
3 margin-right: auto;
4 margin-left: auto;
5 /* margin: 0 auto; と書いても同じ */
6}
隣り合うカードの間隔
隣接セレクタ「+」を使うと、2つ目以降の要素にだけ上の余白をつけられます。
CSS
1.card + .card {
2 margin-top: 24px;
3}
マージンの相殺を避けて間隔を管理する
上下の間隔は margin-bottom（または margin-top）の片方だけで付けるようにすると、相殺を気にせずに済みます。
CSS
1/* × 上下両方に付けると相殺されて 100px になる */
2.block {
3 margin: 100px 0;
4}
5
6/* ○ 下方向だけに付ける */
7.block {
8 margin-bottom: 100px;
9}
注意点
- 01上下に隣接する要素の margin は、大きいほうだけが適用されます（マージンの相殺）。
- 02インライン要素には上下の margin が効きません。
- 03並んだ要素の間隔は、Flexbox・Gridの gap を使うほうが簡潔です。
- 04margin: auto で中央寄せできるのは水平方向だけです。上下の中央配置は Flexbox の align-items などを使います。
- 05width を指定していないブロック要素は幅いっぱいに広がるため、margin: auto を指定しても中央に寄りません。
- 06padding では中央配置はできません（内側の余白が増えるだけです）。