ボックスモデル

ボックスモデルとは

CSSでは、すべてのHTML要素が「ボックス（箱）」として扱われます。 ボックスは内側から順に4つの領域で構成されています：

• content - コンテンツ領域（テキストや画像が表示される部分）
• padding - 内側の余白（コンテンツとボーダーの間）
• border - ボーダー（枠線）
• margin - 外側の余白（他の要素との間隔）

padding（内側の余白）

paddingはコンテンツとボーダーの間の余白です。方向ごとに個別指定もできます：

• padding: 20px; - 上下左右すべて20px
• padding: 10px 20px; - 上下10px、左右20px
• padding: 10px 20px 30px 40px; - 上、右、下、左（時計回り）
• padding-top, padding-right, padding-bottom, padding-left - 個別指定

margin（外側の余白）

marginは要素の外側の余白で、他の要素との間隔を制御します。paddingと同じ記法が使えます。

• margin: auto; - ブロック要素を中央揃え（左右）
• 隣り合う垂直方向のmarginは「マージンの相殺」が起こる（大きい方だけ適用される）
• marginには負の値も設定できる

box-sizing: border-box

デフォルトでは width はコンテンツ領域だけの幅です。 paddingとborderを足すと、実際の表示サイズが指定値より大きくなります。

box-sizing: border-box を使うと、 paddingとborderを含めた合計が width になるため、計算が簡単になります。

まとめ

• すべてのHTML要素は content → padding → border → margin の「ボックス」で構成される
• padding は内側の余白、margin は外側の余白
• margin: auto でブロック要素を中央揃えできる
• box-sizing: border-box を使うとサイズ計算が直感的になる
• 実務では * { box-sizing: border-box; } をリセットCSSに含めるのが一般的