CSSのボックスモデルとは何ですか？

Question

CSSのボックスモデルとは何ですか？

Accepted Answer

CSSのすべての要素は、内側から外側へ4つのレイヤーで構成される矩形の**ボックス**です：**content**、**padding**、**border**、**margin**です。それらがどのように組み合わさるかを理解することが、すべてのレイアウトの基礎になります。

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## 古典的な落とし穴：合計幅

**デフォルト**の `box-sizing: content-box` では、レンダリングされた幅は設定した `width` より*大きく*なります。padding と border が上に追加されるからです：

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

これは初心者を驚かせます — `width: 200px` と設定しても250pxを占有します。誰もが使う修正方法：

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — border *内側*のスペース；要素の一部（クリック可能、背景色を取得）です。
- **margin** — border *外側*のスペース；透明で、隣接する垂直 margin は**折りたたまれます**（接している2つのmarginのうち大きい方が勝ちます）。

## なぜ重要なのか

ボックスモデルは、要素が実際にどのくらい大きいか、そしてそれらがどのように離れているかを制御します。

デフォルトのモデルが `width` に padding/border を追加すること（そしてなぜ `border-box` がほぼ普遍的な修正方法であるか）を知ることで、最も一般的なレイアウトサイジングの混乱を防ぐことができます。