比較記事一覧に戻る
margin と padding の違い
TL;DR — ひとことで言うと
要素の「外」との距離がmargin、要素の「中」の余白がpadding。背景色を含めたい・クリック範囲を広げたいならpadding、隣との間隔を空けたいならmargin（またはgap）です。
比較表
| 観点 | margin | padding |
|---|---|---|
| 位置 | ボーダーの外側 | ボーダーの内側 |
| 背景色 | 付かない（透明） | 付く |
| クリック領域 | 含まれない | 含まれる（タップ領域拡大に有効） |
| 相殺（collapsing） | 縦方向で発生する | 発生しない |
| 負の値 | 指定可能 | 指定不可 |
使い分けの指針
リンクやボタンのタップ領域を広げるのはpaddingの仕事です（44px四方が目安）。要素間の等間隔は、個別のmarginより親のgapで管理する方が現代的で保守しやすい設計です。「余白が思ったより狭い/広い」ときはマージン相殺をまず疑ってください。
🤖 AIがよくやる取り違え
AIは「余白を足して」という曖昧な依頼にmarginとpaddingを場当たり的に混ぜがちです。背景・クリック領域に関わるかどうかを伝えると正しく選びます。