女性向けエンジニアスクール
3秒でわかる
HTML の各要素を、内容と padding と border と margin の 4 層の入れ子として扱う CSS の寸法の考え方です。
もう少し詳しく
どういうものか
CSS がすべての要素を四角い箱として扱い、その箱を内側から順に 4 層で構成する考え方。中心にテキストや画像が入る content があり、その外側に内側の余白である padding、さらに外側に枠線の border、いちばん外に他の要素との間隔をとる margin が重なる。背景色や背景画像は content と padding の範囲までが塗られ、margin は常に透明になる。
ブラウザの開発者ツールで要素を選ぶと、この 4 層が色分けされた図で表示される。寸法が合わないときは、まずそこを見るのが早い。
なぜ必要か
「幅 300 px と指定したのに、並べたら折り返した」という現象は、この積み上がりを知らないと原因が分からない。既定の計算方式では、width が指すのは content だけの幅で、padding と border はその外側に足される。指定した数値と、画面上で占める幅が一致しない。
具体例
.card {
width: 300px;
padding: 20px;
border: 2px solid #ccc;
margin: 16px;
}この場合、画面上で占める幅は 300 + 20 × 2 + 2 × 2 で 344 px になる。margin を含めた場所取りは 376 px になる。
指定した数値をそのまま外形にしたい場合は、計算方式を切り替える。
*,
*::before,
*::after {
<a href="/glossary/box-sizing" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">box-sizing</a>: border-box; /* width に padding と border を含める */
}これで .card の外形はちょうど 300 px になり、padding を増やしても幅は変わらず content が縮む。多くのプロジェクトが冒頭でこの一行を書く。
つまずきやすいところ
上下に並んだ要素の margin が合算されず、大きいほうだけが残るマージンの相殺は、余白が想定の半分になる形で現れる。上の要素の margin-bottom が 20 px、下の要素の margin-top が 30 px なら、間は 50 px ではなく 30 px になる。片側だけに margin を寄せる書き方にすると混乱が減る。
インライン要素に上下の margin や width が効かない点も戸惑いやすい。span などに寸法を与えたい場合は display を inline-block か block に変える。
似た用語との違い
| 値 | width の意味 |
|---|---|
content-box | 内容だけの幅。padding と border は外に足される |
border-box | border の外側までの幅。padding は内側で吸収される |
