# box-sizing

> 要素のサイズ計算方法を指定するプロパティです。content-box（デフォルト）ではpaddingとborderが幅に含まれませんが、border-boxではそれらを含めた幅になります。モダンCSS開発ではborder-boxが必須です。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/box-sizing/

## 構文

```css
box-sizing: content-box | border-box
```

## Tailwindでは

- `box-border` → box-sizing: border-box
- `box-content` → box-sizing: content-box
- 補足: Preflight（リセットCSS）が全要素をborder-boxにするため、通常は書かない。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 10+ / Firefox 29+ / Safari 5.1+ / Edge 12+

## コード例

### 例1: 全要素でborder-boxを適用（推奨設定）

```css
* {
  box-sizing: border-box;
}
```

### 例2: 幅300pxにpadding・borderを含める

```css
.container {
  width: 300px;
  padding: 20px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}
```

## TIPS

border-boxは直感的なサイズ計算。CSSリセットで全体に適用するのが一般的。

## よくある間違い

content-box（デフォルト）では、paddingとborderが幅に追加される。

## AIがよく間違えるポイント

AIは「*, *::before, *::after { box-sizing: border-box }のリセットが既に入っている」前提で幅計算のコードを書くことがあります。プロジェクトにリセットがあるか確認してから使うこと。またborder-boxでもmarginは含まれない（含むのはpaddingとborder）点の誤解が混じることがあります。

## AIへの依頼文例

- このプロジェクトにbox-sizingのリセットが入っているか確認し、なければ現代的なCSSリセットを提案して

## 関連プロパティ

- [width](https://www.css-dictionary.com/property/width.md)
- [height](https://www.css-dictionary.com/property/height.md)
- [padding](https://www.css-dictionary.com/property/padding.md)
- [border](https://www.css-dictionary.com/property/border.md)