基礎

2. ボックスモデル

全てのHTML要素は「箱」です。この箱は4つの層で構成されています：
Content（内容） → Padding（内側余白） → Border（枠線） → Margin（外側余白）

🎮 Box Model プレイグラウンド

box-sizing

margin

20px

border

4px

padding

20px

width (コンテンツ)

100px

margin

padding

Content

合計幅: 148px

.box {
  box-sizing: content-box;
  width: 100px;
  padding: 20px;
  border: 4px solid purple;
  margin: 20px;
}
/* 合計幅 = 100 + 20*2 + 4*2 = 148px */

box-sizing: border-box の重要性

content-box（デフォルト）では、width はコンテンツのみの幅。paddingとborderを足すと合計幅が増えます。
border-box では、width にpadding・borderが含まれるため、計算が直感的になります。

content-box

デフォルト

.box {
  width: 100px;
  padding: 20px;
  border: 4px solid purple;
}
/* 合計幅 = 100 + 40 + 8 = 148px */
/* widthはコンテンツのみ */

border-box

推奨

.box {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 4px solid purple;
}
/* 合計幅 = 100px（固定）*/
/* widthに全て含まれる */