比較記事一覧に戻る
gap と margin の違い（要素間の余白）
TL;DR — ひとことで言うと
flex/gridの「アイテム間」の等間隔はgap一択。外周には付かず、打ち消しも相殺もない。marginは外周の余白や個別の例外調整に使います。
比較表
| 観点 | gap | margin |
|---|---|---|
| 効く場所 | アイテムとアイテムの間だけ | 指定した要素の周囲（外周にも付く） |
| 端の処理 | 外周には付かない（打ち消し不要） | :last-child等での打ち消しが必要になりがち |
| マージン相殺 | なし | 縦方向で発生する |
| 使える場所 | flex / grid /（段組み）コンテナ内 | どこでも |
| 保守性 | 間隔の定義がコンテナ1箇所に集まる | 各アイテムに散らばりやすい |
使い分けの指針
「一覧の間隔」はコンテナのgapに寄せ、「セクション同士の距離」や「この要素だけ特別に離す」例外はmarginで、と役割を分けるとスタイルが散らかりません。既存のmargin+:last-child打ち消しパターンを見つけたら、gapへのリファクタリング候補です。
🤖 AIがよくやる取り違え
AIは古い作法のmargin-right + :last-childの打ち消しを今でも出すことがあります。flexのgapも2021年から全ブラウザ対応済みなので、gapで書くよう指定して問題ありません。