width:200pxなのに248px？box-sizingの幅を実測する

同じ200pxでも外側の幅が違う

今回の2つの箱は、どちらもwidth:200px、padding:20px、border:4pxです。「幅を計測」を押すと、content-boxは248px、border-boxは200pxと表示されました。

content-boxでは本文の200pxに左右の余白40pxと枠線8pxが足されます。border-boxではそれらを200pxの中へ収めるため、本文に使える幅は152pxです。

指定値と実測値を見比べる

1. 作例を開き、上下の箱の幅を比べます。文字の長さではなく、枠線の端を見ます。
2. 「幅を計測」を押し、248pxと200pxの結果を確認します。
3. ZIPを保存して展開し、example.htmlの.boxにあるpaddingを変更すると、同じwidthに対する違いを自分でも試せます。ここで掲載している実測値はpadding:20pxの状態です。

計測にはgetBoundingClientRect().widthを使っています。この作例にはtransformや横方向の拡大縮小を指定していません。

marginは幅に含まれない

border-boxでもmarginはwidthに含まれません。カードが行からはみ出すときは、外側の余白や親の幅も別に確かめます。今回の実験だけで、すべてのはみ出しの原因を判断できるわけではありません。

MDNのbox-sizingの説明で2つの計算方法を確認できます。要素によって初期スタイルが異なるため、この作例では両方を明示しました。余白と押せる範囲の関係はpaddingとmarginの比較でも試せます。