CSS
ボックスモデル
読み方：ボックスモデル
HTML要素を content → padding → border → margin の4層の箱として扱う考え方。
やさしい説明
ボックスモデルとは、HTML のすべての要素を「箱（ボックス）」として扱う考え方です。
ウェブページ上のすべての要素は、目に見えない箱に入っています。この箱は、外側から順に4つの層でできています。
- margin（マージン） — 箱の外側の余白。隣の箱との距離
- border（ボーダー） — 箱の枠線
- padding（パディング） — 箱の内側の余白。内容と枠線の間
- content（コンテンツ） — 実際の内容（文字や画像）
プレゼントの箱に例えると、content が「中身」、padding が「緩衝材」、border が「箱の壁」、margin が「箱と箱の間のスペース」です。
図解：ボックスモデルの4層
具体例・使い方
.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 が含まれます。
関連用語
📖 関連レッスン
レッスンを見る →