box-sizing content-boxの横幅計算

📝 問題の再掲

Q19: width: 300px; padding: 20px; border: 2px solid; のとき、box-sizing: content-box（デフォルト）での実際の表示幅は？

正答: 344px

⚠️ よくある間違い

「width: 300px と書いたら 300px で表示される」と思いがちですが、content-box では padding と border が外側に追加されます。

📖 段階的な説明

ステップ1：content-box の計算式

実際の表示幅 = width + padding左 + padding右 + border左 + border右

ステップ2：計算してみよう

width:   300px（コンテンツ幅）
padding:  20px × 2 = 40px（左右）
border:    2px × 2 =  4px（左右）
─────────────────────────
合計:    344px（実際の表示幅）

ステップ3：border-box なら？

box-sizing: border-box を指定すると、width の中に padding と border が含まれます。表示幅はそのまま 300px です。

ステップ4：なぜ border-box が推奨されるか

計算が直感的になるため、多くのプロジェクトで * { box-sizing: border-box; } をリセットCSSとして使います。

💻 コード例

/* content-box（デフォルト）: 表示幅 = 344px */
.box-a {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

/* border-box: 表示幅 = 300px */
.box-b {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

/* 推奨リセット */
* { box-sizing: border-box; }

🔗 関連知識

• 開発者ツールで要素を選択すると、ボックスモデルの図が表示されます
• height（高さ）も同じルールで計算されます

✅ 確認問題

Q: box-sizing: border-box; width: 200px; padding: 16px; border: 4px solid; のとき、コンテンツが使える幅は何px？