CSSのbox-sizingでcontent-boxとborder-boxの幅計算を切り替える

CSSでwidthを指定した要素が親要素からはみ出す場合は、内容、padding、borderの幅を分けて計算します。box-sizing: content-boxでは、widthが内容領域だけの幅になります。box-sizing: border-boxでは、widthがpaddingとborderを含む幅になります。

外側の幅を指定値にそろえたい部品にはborder-boxを使います。内容そのものの幅を指定し、paddingとborderを外側へ加えたい場合はcontent-boxを使います。border-boxを付ければ無条件に直るのではなく、どの幅を固定したいかで選びます。

box-sizingはwidthが示す範囲を決める

CSS 2.1のボックスモデルでは、要素の箱を内側からcontent、padding、border、marginの領域に分けます。box-sizingは、このうちwidthとheightがどの領域までを示すかを決めます。

box-sizingの初期値はcontent-boxです。box-sizingは継承されないため、親要素へ指定した値が子要素へ自動で移ることもありません。幅を計算する要素自身の指定を確認します。

content-boxではpaddingとborderが指定幅へ加わる

次の模式例では、親要素の内容幅を300pxとします。子要素にはwidth: 100%、左右20pxのpadding、左右5pxのborderを指定しています。marginは0です。

.parent {
  width: 300px;
}

.child {
  box-sizing: content-box;
  width: 100%;
  padding: 20px;
  border: 5px solid #333;
}

子要素のwidth: 100%は300pxです。content-boxでは、この300pxが内容幅になります。paddingとborderは外側へ加わります。

内容幅       300px
左右padding   40px
左右border    10px
borderまでの幅 350px

計算は300 + 20 + 20 + 5 + 5 = 350pxです。親要素の内容幅は300pxなので、子要素のborderまでの幅は50px大きくなります。width: 100%と書いてあっても、paddingとborderを含めた幅が100%になるわけではありません。

border-boxではpaddingとborderを指定幅へ含める

同じ子要素を300pxの外寸に収めるなら、box-sizingだけをborder-boxへ変えます。

.child {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 5px solid #333;
}

border-boxでは、300pxの内側へ左右のpaddingとborderを置きます。内容幅は、指定幅からpaddingとborderを引いて求めます。

borderまでの幅 300px
左右padding     40px
左右border      10px
内容幅         250px

計算は300 - 20 - 20 - 5 - 5 = 250pxです。指定した300pxはborderまでの幅として維持され、内容領域が250pxになります。

border-boxはpaddingやborderを消す指定ではありません。外寸を変えず、内容に使える幅を減らして、paddingとborderの場所を確保します。

marginはborder-boxの指定幅に含まれない

border-boxが含むのは、content、padding、borderです。marginは指定幅の外側に残ります。幅300pxの要素へ左右10pxのmarginを付ければ、marginまで含めて占める横幅は320pxです。

.child {
  box-sizing: border-box;
  width: 300px;
  margin: 0 10px;
}

親要素の内容幅が300pxなら、この例は左右のmarginまで含めては収まりません。親からのはみ出しを調べるときは、box-sizingだけでなく、左右のmarginも別に足します。

指定幅より左右のpaddingとborderの合計が大きい場合にも注意が必要です。border-boxでは、計算した内容幅が負にならないよう0になります。paddingとborder自体が縮むわけではないため、狭い指定幅でも必ず収まるとは限りません。

外寸を固定するか内容幅を固定するかで選ぶ

ボタン、入力欄、横並びの列など、borderまでの幅をそろえたい部品にはborder-boxが向きます。paddingやborderを変更しても、指定した外寸を維持できるからです。

本文の一行を一定の内容幅で組み、その外側へ余白と罫線を追加したい場合は、content-boxの計算が目的に合うこともあります。初期値だからそのまま使うのではなく、内容幅と外寸のどちらを設計値にするかを決めます。

box-sizingの指定は、widthとheightだけでなく、min-width、max-width、min-height、max-heightが示す範囲にも関係します。通常の幅だけを直しても、最小幅や最大幅で同じ指定が働く点を確認します。

まず、はみ出している要素を一つ選びます。親の内容幅、子のwidth、左右のpadding、左右のborder、左右のmarginを順に書き出してください。外寸を親幅へそろえる必要がある場合だけ、その子要素へbox-sizing: border-boxを指定し、実際の表示幅を確認します。