widthが同じなのに幅が違う？box-sizingで余白と枠の計算を確かめよう

カードにwidth: 200pxを指定したのに、余白と枠を付けると隣に収まらない。そんなときは、幅の数字を減らす前にbox-sizingを確認しよう。CSSの寸法に、どこまでを含めるか決めるプロパティだよ。

今回は通常のブロック要素で、幅200px、左右の内側余白20pxずつ、左右の枠4pxずつを比較する。変形や拡大表示を付けない作例で、枠を含む実際の幅を測る。

content-boxでは、指定幅の外に余白と枠が加わる

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 4px solid;
}

content-boxでは、widthは内容部分の幅を表す。左右のpadding（枠の内側の余白）とborder（枠）は別に加わるため、枠の外端から外端までの幅は次の計算になる。

200 + 20×2 + 4×2 = 248px

外側の余白marginは、この248pxにも含まれない。隣の要素との間隔まで考えるときは、別に確認しよう。

border-boxでは、余白と枠を指定幅の中へ含める

.card {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 4px solid;
}

こちらは枠を含む幅が200px。内容に使える幅は、200−40−8で152pxになる。同じ文章でも、内容部分が狭くなったぶん行が折り返しやすくなるよ。

ただし、余白と枠だけで指定幅を超える極端な値では、内容の幅を負にはできない。常にどんな指定でも外寸を200pxに押し込める、という意味ではないんだ。

同じ条件で切り替えてみよう

記事下の作例は、最初にcontent-box、幅200px、余白20px、枠4pxが指定されている。

1. 「枠を含む実測幅」が248pxになることを読む。
2. border-boxへ切り替え、200pxになることを確認する。
3. 余白を30pxへ増やす。border-boxの外寸は200pxのまま、文章に使える幅が狭くなる。
4. content-boxに戻すと、外寸が268pxになる。

作例はgetBoundingClientRect().widthで枠を含む幅を表示する。ブラウザで248→200→200→268pxを確認した。「最初から試す」で余白20px・content-boxへ戻せるよ。画面が狭いときも比較できるよう、箱は小さめにしている。

ページ全体へ指定するときの確認点

*,
*::before,
*::after {
  box-sizing: border-box;
}

こうした指定は、要素と疑似要素の幅計算をそろえる際によく使われる。ただし既存サイトへ追加すると、元の計算を前提にした部品が変わることがある。フォーム、表、固定幅の部品から確認しよう。ブラウザの初期スタイルですでにborder-boxの要素もあるため、「すべて最初はcontent-box」とは決めつけないでね。

border-boxでも、長いURL、子要素の最小幅、横並びの間隔などで親からはみ出すことはある。幅計算を確認したら、次に中身やレイアウトを調べよう。余白と要素同士の間隔の作例では、内側と外側の役割も比べられるよ。