# margin と padding の違い

> 要素の「外」との距離がmargin、要素の「中」の余白がpadding。背景色を含めたい・クリック範囲を広げたいならpadding、隣との間隔を空けたいならmargin（またはgap）です。

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

## 比較表

| 観点 | margin | padding |
| --- | --- | --- |
| 位置 | ボーダーの外側 | ボーダーの内側 |
| 背景色 | 付かない（透明） | 付く |
| クリック領域 | 含まれない | 含まれる（タップ領域拡大に有効） |
| 相殺（collapsing） | 縦方向で発生する | 発生しない |
| 負の値 | 指定可能 | 指定不可 |

## 使い分けの指針

リンクやボタンのタップ領域を広げるのはpaddingの仕事です（44px四方が目安）。要素間の等間隔は、個別のmarginより親のgapで管理する方が現代的で保守しやすい設計です。「余白が思ったより狭い/広い」ときはマージン相殺をまず疑ってください。

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

AIは「余白を足して」という曖昧な依頼にmarginとpaddingを場当たり的に混ぜがちです。背景・クリック領域に関わるかどうかを伝えると正しく選びます。

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

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