box-sizing: border-box は何をしますか?

Question

Accepted Answer

`box-sizing` は、**`width` と `height` プロパティが実際に何を測定するか**を制御します。デフォルト値 (`content-box`) はコンテンツのみを測定します。`border-box` はパディングとボーダーを含めます。

## なぜ重要なのか

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

`content-box` では、パディングとボーダーは `width` の**上に加算され**るため、要素は設定した数値より広くなります。これはレイアウトを破壊します。パディング付きの `width: 50%` ボックスは 50% をはみ出します。

## 解決策: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

`border-box` では、`width` は**最終的な**レンダリング幅です。パディングとボーダーは内側から差し引かれます。設定した数値がそのまま得られるサイズになり、非常に直感的です。

## ユニバーサルリセット

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

ほぼすべての現代的なスタイルシート、フレームワーク、リセットはこれをグローバルに適用します。サイズ指定が予測可能になります。`width: 50%` + パディングは正確に 50% の幅のままで、2 つの `width: 50%` ボックスは側並びで、はみ出すことなく配置されます。

## なぜ重要なのか

`border-box` は、レイアウト計算で最も一般的な問題の原因を排除します。すべての幅にパディングとボーダーを心理的に加算する必要がなくなります。

グローバルに設定することはベストプラクティスのデフォルトと見なされています。なぜなら「設定した幅が得られる幅」は、自然にサイズ指定が機能すると期待する方法だからです。