gapとmarginは同じ余白？項目の間隔と最後の外側を作例で比べよう

カードを並べるとき、子へmarginを付ける方法と、親へgapを付ける方法がある。見た目が似ていても、最後の項目の後ろまで空くかは違うよ。

この記事ではFlexレイアウトの縦並びで、項目の間隔と外側の余白を比較する。準備はブラウザだけ。実際のページを書き換えず、作例の三つの箱で確かめよう。

親が間隔を作るか、各項目が余白を持つか

gapは、FlexやGridなどのレイアウトで項目・行・列の間隔を指定する。通常のブロックに書くだけで、すべての子の間へ自動で効くものではないよ。

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

この縦並びでは、表示される項目の間に12pxが入る。リスト全体の外側を離したい場合は、親のmarginなどを別に考える。

一方、すべての子へmargin-bottom:12pxを付けると、この作例では最後の項目の後ろにも12pxが残る。最後の子だけ余白を変える設計もできるけれど、二つの指定を同じ意味だと思わないことが大切だよ。

動かしてみよう

記事下の作例はA・B・Cを縦に並べる。最初はgap、切り替えると全ての子へmargin-bottomを付ける。

1. 二つの方法で、項目間が同じ12pxになることを見る。
2. 最後のCと枠の下側の距離を比べる。
3. 中央のBを隠し、残るAとCの間隔を確認する。
4. 枠の高さの違いを結果欄で読む。
5. リセットでgap・三項目へ戻す。

枠には同じpaddingも付けている。最後の余白が0という表示は、枠の内側のpaddingまでなくなる意味ではないよ。

marginをなくせばよい、ではない

項目ごとに違う距離が必要な場面や、部品の外へ余白を作る場面ではmarginが目的に合う。gapも、折り返しや行・列によって、どの間隔を指定しているかを確認する必要がある。

両方を同じ場所へ指定すると、想定より広くなる場合がある。開発者ツールで、gap・margin・paddingのどれが空間を作っているかを分けて読もう。

箱の寸法はbox-sizing、情報のまとまりは余白と揃え方の基本も参考になるよ。

参照した公式資料

• MDN：gap

確認日：2026年10月24日。