CSS

ボックスモデル

初級

読み方：ボックスモデル｜英語：Box Model

HTML要素を content → padding → border → margin の4層の箱として扱う考え方だよ。いつ使う？ 要素のサイズや余白を調整するとき、この4層を意識するよ。開発者ツールのボックスモデル図で視覚的に確認できるよ。間違いやすいポイント: デフォルトではwidthにpaddingとborderが含まれないから、width: 100px + padding: 20px = 実際は140pxになるよ。box-sizing: border-box; を指定すれば解決するよ。

やさしい説明

ボックスモデルとは、HTML のすべての要素を「箱（ボックス）」として扱う考え方です。

ウェブページ上のすべての要素は、目に見えない箱に入っています。この箱は、外側から順に4つの層でできています。

  1. margin（マージン） — 箱の外側の余白。隣の箱との距離
  2. border（ボーダー） — 箱の枠線
  3. padding（パディング） — 箱の内側の余白。内容と枠線の間
  4. content（コンテンツ） — 実際の内容（文字や画像）

プレゼントの箱に例えると、content が「中身」、padding が「緩衝材」、border が「箱の壁」、margin が「箱と箱の間のスペース」です。

図解：ボックスモデルの4層

ボックスモデルの4層：margin・border・padding・content

具体例・使い方

.card {
  margin: 16px;          /* 外側の余白 */
  border: 2px solid #ccc; /* 枠線 */
  padding: 24px;         /* 内側の余白 */
  width: 300px;          /* 内容の幅 */
}

ブラウザの開発者ツール（F12）で要素を選択すると、ボックスモデルの図が表示されます。

よくある疑問

Q: margin と padding の違いがわからない

A: margin は箱の「外側」、padding は箱の「内側」の余白です。border を境界線として、外が margin、内が padding です。

Q: width を 300px にしたのに実際の幅が大きくなるのはなぜ？

A: デフォルトでは width は content の幅だけです。box-sizing: border-box を指定すると、width に padding と border が含まれます。

いつ使う？

要素のサイズや余白を調整するときに常に意識します。「カードの内側に余白がほしい」→ padding、「カード同士の間隔を空けたい」→ margin。開発者ツール（F12）でボックスモデルを確認する習慣をつけましょう。

間違いやすいポイント

❌ widthを指定したのに想定より大きくなる

/* ❌ 実際の幅 = 300 + 20*2 + 2*2 = 344px */
.box { width: 300px; padding: 20px; border: 2px solid; }

/* ✅ box-sizing: border-box で解決 */
.box { width: 300px; padding: 20px; border: 2px solid;
       box-sizing: border-box; }
/* → 実際の幅がぴったり300pxになる */

関連用語

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A

← 用語集一覧に戻る