CSSボックスモデル完全解説 — margin・padding・borderの違いと使い方
CSSボックスモデルはWebレイアウトの基礎となる概念で、すべての要素がcontent・padding・border・marginの4層で構成されます。この仕組みを正確に理解することで、余白の制御やレイアウトの崩れを防ぐことができます。
content・padding・border・marginの違い
contentは実際のテキストや画像が入る領域です。paddingはcontentと外枠（border）の間の内側の余白で、背景色が適用されます。borderはpaddingの外側に描かれる境界線です。marginはborderの外側の要素間の空白で、透明で背景色は適用されません。この4層を合計したサイズが要素が占める実際の領域になります。
box-sizing: content-box と border-box の違い
content-box（デフォルト）ではwidth/heightがcontent領域のサイズを指定します。paddingとborderはwidthに加算されるため、実際の見た目サイズはwidth+padding+borderになります。border-boxではwidth/heightがborder+padding+contentを含む全体サイズを指定します。多くのCSSフレームワークがborder-boxを採用し、サイズ計算が直感的になります。* { box-sizing: border-box; }でサイト全体に適用するのが一般的です。
marginの相殺（マージンの折りたたみ）
垂直方向のmarginは隣接する要素間で相殺（collapse）が発生します。親要素と最初の子要素のmarginが合算されず大きい方のみ適用される場合があります。この挙動はよくあるバグの原因です。overflow: hiddenやdisplay: flexを親に適用するとmarginの相殺を防げます。水平方向（横並び）のmarginは相殺されません。
paddingとmarginの使い分け
paddingは背景色・背景画像が必要な内側の余白や、クリック領域を広げたいボタン・リンクに使います。marginは要素間の空白やセンタリング（margin: 0 auto）に使います。FlexboxやGridを使ったレイアウトではgapプロパティでアイテム間隔を制御できるため、marginの代わりに使うとマージン相殺の問題を避けられます。