CSSボックスモデルとは？基本構造をわかりやすく解説

CSSボックスモデルとは

Webデザインやレイアウトを語るうえで欠かせない基本概念が「ボックスモデル（box model）」です。CSSでは、HTMLのすべての要素が四角形の「箱」として扱われます。テキストや画像、見出しなど、どの要素も例外なくこの考え方に基づいて配置されます。

ボックスモデルを正しく理解することは、要素のサイズ計算や余白の調整、意図した通りのレイアウトを実現するための第一歩となります。

ボックスモデルの4つの構成要素

CSSボックスモデルは、内側から外側へ向かって以下の4つの領域で構成されています。

1. コンテンツ（content）

テキストや画像など、要素そのものが持つ実際の中身です。width プロパティと height プロパティでサイズを指定できる部分にあたります。

2. パディング（padding）

コンテンツと境界線の間にある内側の余白です。背景色や背景画像はこの領域にも適用されるため、見た目上はコンテンツ領域の一部として表示されます。

3. ボーダー（border）

パディングの外側を囲む境界線です。線の太さ・種類・色を border プロパティで自由に指定でき、要素の輪郭を明確にする役割を担います。

4. マージン（margin）

ボーダーのさらに外側にある余白で、隣接する他の要素との距離を調整します。マージン領域には背景が適用されず、常に透明として扱われます。

まとめ

ボックスモデルは「コンテンツ＋パディング＋ボーダー＋マージン」の多層構造で成り立っています。各領域の役割を把握しておくと、box-sizing プロパティによるサイズ計算方法の変更や、余白崩れのトラブルシューティングにもスムーズに対応できるようになります。CSSレイアウトの土台となる重要な概念なので、ぜひ確実に押さえておきましょう。