# gap と margin の違い（要素間の余白）

> flex/gridの「アイテム間」の等間隔はgap一択。外周には付かず、打ち消しも相殺もない。marginは外周の余白や個別の例外調整に使います。

- URL: https://www.css-dictionary.com/compare/gap-vs-margin/

## 比較表

| 観点 | gap | margin |
| --- | --- | --- |
| 効く場所 | アイテムとアイテムの間だけ | 指定した要素の周囲（外周にも付く） |
| 端の処理 | 外周には付かない（打ち消し不要） | :last-child等での打ち消しが必要になりがち |
| マージン相殺 | なし | 縦方向で発生する |
| 使える場所 | flex / grid /（段組み）コンテナ内 | どこでも |
| 保守性 | 間隔の定義がコンテナ1箇所に集まる | 各アイテムに散らばりやすい |

## 使い分けの指針

「一覧の間隔」はコンテナのgapに寄せ、「セクション同士の距離」や「この要素だけ特別に離す」例外はmarginで、と役割を分けるとスタイルが散らかりません。既存のmargin+:last-child打ち消しパターンを見つけたら、gapへのリファクタリング候補です。

## AIがよくやる取り違え

AIは古い作法のmargin-right + :last-childの打ち消しを今でも出すことがあります。flexのgapも2021年から全ブラウザ対応済みなので、gapで書くよう指定して問題ありません。

## それぞれの詳しい解説

- [gap](https://www.css-dictionary.com/property/gap.md)
- [margin](https://www.css-dictionary.com/property/margin.md)