この記事の目次
box-sizing: border-boxとは
width: 300px と書いたのに、画面上では300pxより広い。これは、CSSの初期値である box-sizing: content-box では、widthが「中身の幅」だけを指すためです。padding と border は、その外側に足されます。box-sizing: border-box を指定すると、width に padding と border が含まれ、見たままの大きさで設計できます。
基本（構文・仕組み）
| 値 | width の意味 | 実際の横幅 |
|---|---|---|
| content-box（初期値） | 中身（content）だけ | width + padding + border |
| border-box | content + padding + border | width そのまま |
ボックスは内側から、content → padding → border → margin の順に重なります。border-box でも margin は含まれません。MDN では、<table> <select> <button> などは、ブラウザ標準で border-box を使うことがあると説明されています。
全要素に指定する、よく使われる書き方です。
*,
*::before,
*::after {
box-sizing: border-box;
}
box-sizing は継承されないため、html だけに書いても子要素には効きません。そのため、全要素セレクタや、html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } の形が使われます。
サンプルコード（実行結果つき）
<style>
.b { width: 300px; padding: 20px; border: 5px solid #333; }
.cb { box-sizing: content-box; }
.bb { box-sizing: border-box; }
.full { width: 100%; padding: 20px; border: 5px solid #333; }
.full.bb2 { box-sizing: border-box; }
</style>
<div class="b cb">content-box</div>
<div class="b bb">border-box</div>
<div class="full">content-box 100%</div>
<div class="full bb2">border-box 100%</div>
動作確認（検証環境と結果）
- 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/
render.ps1+getBoundingClientRect() - ファイル:
C:Tempks2techtestst2box-sizing.html
| 指定 | 計算 | 実測した横幅 |
|---|---|---|
| content-box / width 300px | 300 + 20×2 + 5×2 | 350px |
| border-box / width 300px | 300 のまま | 300px |
| content-box / width 100% | 親の幅 + 50 | 1216px（親の内側は1166px） |
| border-box / width 100% | 親の幅そのまま | 1166px |
width: 100% に padding を足すと、親から50pxはみ出すことを実測で確認しました。
box-sizing: border-boxの注意点
border-boxでは、padding と border の合計がwidthを超えると、content の幅は0になり、見た目は崩れます。aspect-ratioやheightも box-sizing の影響を受けます。比率指定した要素に padding を付けると、見た目の比率が変わることがあります。position: absoluteの要素を、content-box 基準で配置したい場面は例外的にあります。- 既存の古いCSSに、全体指定を後から入れると、レイアウトがずれることがあります。
box-sizing: border-boxでよくあるミス
width: 50%を2つ並べて、padding を付けたら折り返された。content-box のままだと、合計が100%を超えます。- 全体指定を
bodyにだけ書いて、inputやbuttonに効かなかった。 box-sizingを継承されるものと考え、親だけに書いた。- 疑似要素（
::before::after）に指定が漏れた。
ブラウザ対応・バージョン
MDN によると、box-sizing は2015年7月から主要ブラウザで使える Baseline の機能です。IE7以前を相手にする場面は、現在はほとんどないため、ベンダープレフィックスは通常不要です。最新の対応状況は MDN で確認してください。
box-sizing: border-boxのチェックリスト
- リセットCSSまたは共通CSSの先頭で、全要素に border-box を指定したか。
*::before*::afterにも適用されているか。width: 100%と padding・border を併用していないか（border-box なら安全）。- DevTools のボックスモデル表示で、実寸を確認したか。
box-sizing: border-boxのFAQ（よくある質問）
Q. なぜ初期値は content-box なのですか？
A. CSS1 からの仕様の経緯によるものです。使い勝手の面で、border-box を選ぶ人が多くなっています。
Q. border-box にすると margin も含まれますか？
A. 含まれません。margin は常に外側です。
Q. 全要素に指定すると遅くなりますか？
A. 通常の規模のサイトで、体感できる差が出ることはまれです。気になる場合は、計測してから判断してください。
筆者の見解（box-sizing: border-box）
border-box は、新規に作るCSSでは最初に入れておく設定と考えます。「見たままの数字」で計算できるため、2カラムや余白の調整が楽になります。ただし、既存サイトに途中から導入するときは、全ページを目視で確認する前提で進めるのが安全です。
