width / height基準にする寸法
要素へ指定した幅と高さが、どの領域の寸法になるかを切り替えます。
box-sizing
指定した幅にpaddingとborderを含めるかを決めるプロパティ。同じwidthでも、値によって箱の実寸が変わります。
遊んでみよう
指定値：width 160px
CONTENTpadding 24px
border 6px
border 6px
CSS
.element box-sizing: content-box;
値のパターン
box-sizingの構成要素
padding + border内側の余白と境界線
content-boxでは指定幅の外へ足され、border-boxでは指定幅の内側へ収まります。
content-box | border-box2つの計算方法
初期値はcontent-box。レイアウトではborder-boxも広く使われます。
早見表
指定できる値は2つ。どちらもmarginはwidthとheightの計算に含めません。
01
content-box内容領域だけ初期値02
border-boxpadding・borderまで実寸を保つ03
initial初期値へ戻すcontent-box04
inherit親の値を受け継ぐグローバル値よくある使い方
01
フォームを親幅に収める
width: 100%の入力欄へpaddingやborderを足しても、親要素からはみ出しにくくなります。
box-sizing: border-box;02
カードの幅を揃える
内側の余白や境界線が異なるカードでも、指定した外寸を基準に並べられます。
box-sizing: border-box;03
内容領域の幅を固定する
本文そのものの幅を保ち、その外側へpaddingとborderを足したいときは初期値を使います。
box-sizing: content-box;ポイント
border-boxでもmarginは含まれない。
border-boxがwidthとheightへ含めるのは、content、padding、borderです。要素の外側にあるmarginは別に加わります。またbox-sizing自体は通常、子要素へ継承されません。
関連するCSSも見てみよう。
box-sizing と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。