CSSボックスモデルを完璧に理解｜margin・padding・border・contentの関係

はじめに

Webページをデザインする上で欠かせないのが**CSSのボックスモデル（Box Model）**です。
ボックスモデルを理解すれば、要素の余白や枠線、サイズの扱いを正確にコントロールできるようになります。

この記事では、

• ボックスモデルの基本構造
• margin・padding・border・content の違い
• box-sizing の設定方法
• 実際のレイアウト調整例

をわかりやすく解説します。

👉 関連記事：

• CSSの基本プロパティ解説｜初心者が最初に覚えるべき項目まとめ
• HTMLとCSSの使い方まとめ｜初心者が基礎から身につける完全ガイド

1. CSSボックスモデルとは

すべてのHTML要素は「四角い箱」として扱われます。
その箱の構造を定義する仕組みが ボックスモデル です。

ボックスモデルは、内側から順に以下の4つの領域で構成されます。

2. 各プロパティの役割

2-1. content（内容）

要素の中身が入る領域です。
テキストや画像、他の要素などがここに表示されます。

.box {
  width: 200px;
  height: 100px;
}

この場合、width と height は content のサイズを指定しています。

2-2. padding（内側の余白）

content と border の間にある「内側の余白」です。
要素の背景色は padding にも反映されます。

.box {
  padding: 20px;
  background-color: lightblue;
}

👉 ポイント：

padding が増えると ボックス全体のサイズが大きくなります（後述の box-sizing で変更可）。

2-3. border（枠線）

padding と margin の間にある枠線部分です。
太さ・スタイル・色を指定できます。

.box {
  border: 5px solid #333;
}

枠線はデザインのアクセントにも使えます。

2-4. margin（外側の余白）

他の要素との間隔を作るための「外側の余白」です。

.box {
  margin: 30px;
}

👉 ポイント：

隣接する要素の上下の margin は「相殺（マージンの重なり）」が起こることがあります。

例：

h1 {
  margin-bottom: 30px;
}
p {
  margin-top: 20px;
}

この場合、上下の余白は「50px」ではなく「大きい方の30px」だけ適用されます。

3. box-sizing でサイズの計算方法を変える

通常、width と height は content のみを対象にしています。
しかし、ボーダーやパディングを含めたサイズで管理したい場合は box-sizing を使います。

.box {
  box-sizing: border-box;
}

この設定をすると、
width に指定したサイズの中に padding と border も含まれる ため、レイアウト調整がしやすくなります。

👉 おすすめ：

Web制作では、全体に以下を設定しておくのが一般的です。

* {
  box-sizing: border-box;
}

4. 実践例：ボックスモデルの違いを比較

HTML

<div class="content-box">content-box</div>
<div class="border-box">border-box</div>

CSS

div {
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin-bottom: 20px;
  background-color: lightcoral;
  color: #fff;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

結果：

• content-box：padding と border 分だけ全体が大きくなる
• border-box：width 内に padding と border を含む

5. よくあるトラブル例

6. まとめ

ボックスモデルはCSSレイアウトの基礎中の基礎です。
しっかり理解しておくと、要素の間隔や整列で迷うことが少なくなります。

👉 次に読むと理解が深まります：

• CSSレイアウト構築ガイド【初心者から中級者まで】
• HTMLのdivタグ使い方まとめ｜ブロック要素を理解しよう
• CSSのmarginとpaddingの違いを徹底比較｜余白設定のコツ