要素のサイズ計算方法を指定するプロパティです。content-box（デフォルト）ではpaddingとborderが幅に含まれませんが、border-boxではそれらを含めた幅になります。モダンCSS開発ではborder-boxが必須です。
box-sizing: content-box | border-box| box-border | box-sizing: border-box |
| box-content | box-sizing: content-box |
Preflight（リセットCSS）が全要素をborder-boxにするため、通常は書かない。
* {
box-sizing: border-box;
}全要素でborder-boxを適用（推奨設定）
.container {
width: 300px;
padding: 20px;
border: 2px solid #ccc;
box-sizing: border-box;
}幅300pxにpadding・borderを含める
border-boxは直感的なサイズ計算。CSSリセットで全体に適用するのが一般的。
content-box（デフォルト）では、paddingとborderが幅に追加される。
AIは「*, *::before, *::after { box-sizing: border-box }のリセットが既に入っている」前提で幅計算のコードを書くことがあります。プロジェクトにリセットがあるか確認してから使うこと。またborder-boxでもmarginは含まれない（含むのはpaddingとborder）点の誤解が混じることがあります。
このプロジェクトにbox-sizingのリセットが入っているか確認し、なければ現代的なCSSリセットを提案して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。