CSSのbox-sizingプロパティとは？content-boxとborder-boxの違いをわかりやすく解説

CSSのbox-sizingプロパティを使いこなせば、ブラウザがHTML要素の幅や高さをどのように計算し、描画するかを自由にコントロールできます。この記事では、box-sizingの2つの値「content-box」と「border-box」の違いを、具体的なコード例とともにわかりやすく解説します。

box-sizingとは？content-boxとborder-boxの違い

CSSのbox-sizingプロパティには、主に次の2つの値があります。

• content-box（デフォルト値）
• border-box

どちらの値も、ブラウザがHTML要素のサイズを計算・描画する方法に影響を与えますが、共通しているのはそれだけです。それぞれの挙動を詳しく見ていきましょう。

content-box：デフォルトの挙動

デフォルトでは、すべてのHTML要素にcontent-boxが適用されています。

box-sizing: content-box;

つまり、次のようなスタイルを要素に指定した場合を考えてみましょう。

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

このとき、要素の幅と高さは、CSSで指定した100pxではなく134pxとして計算されます。
これは、content-boxがwidth／heightの値に対して、border（各辺1px）とpadding（各辺16px）の値を合算し、その合計サイズで要素を描画するためです。

• 要素の幅：1 + 16 + 100 + 16 + 1 = 134ピクセル
• 要素の高さ：1 + 16 + 100 + 16 + 1 = 134ピクセル

実際にサイズを確認したい場合は、次のショートカットキーでブラウザの開発者ツール（要素の検証）を開き、該当要素にマウスカーソルを合わせてみてください。

• Mac：Cmd + Shift + C
• Windows：Ctrl + Shift + C

このcontent-boxのデフォルト挙動は、レイアウトを調整する際に意外と厄介です。しかし幸い、この挙動は簡単に変更できます。

ちなみに、デフォルトのbox-sizing: content-box;という宣言は、すべてのWebブラウザに組み込まれている「ユーザーエージェントスタイルシート」から継承されたものです。

border-boxで問題を解決

content-boxの値は、border-boxに置き換えることで簡単に上書きできます。border-boxは、ブラウザによる要素サイズの計算方法において、まったく逆の効果を持ちます。

box-sizing: border-box;

box-sizingプロパティをborder-boxに設定すると、ブラウザはwidthとheightプロパティで指定した正確なサイズどおりに要素を描画します。

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box;
}

この場合、paddingやborderを指定しても、要素はきっちり100px × 100pxで描画されます。

border-boxを指定すると、ブラウザは要素の全体の幅と高さを計算する際に、指定されたpaddingとborderの値を「含めて」計算します（上乗せはしません）。つまり、border-boxを使えば、要素にどんなpaddingやborderの値を追加しても、要素の最終的なサイズはwidthとheightで指定した値のままになるのです。

両者の違いを並べて比較してみましょう。2つの要素はどちらも幅・高さともに100pxが指定されていますが、指定どおりのサイズで表示されるのは、border-boxを使っている2番目の要素だけです。

content-boxとborder-boxの違いをまとめると、次のとおりです。

• content-box：paddingとborderの値を要素のwidth／heightに合算し、その合計サイズで描画する
• border-box：paddingとborderの値を要素のwidth／heightに含めたものとして扱う

すべての要素にborder-boxを適用しよう

border-boxを使えば、ブラウザはCSSで指定したとおりの実際のサイズでHTML要素を描画してくれます。では、サイト内のすべてのHTML要素にborder-boxを適用するには、どうすればよいのでしょうか？

答えはシンプルです。スタイルシートの先頭に、次のCSSルールセットを追加するだけです。

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

このコードは、CSSのユニバーサルセレクタ（*）を使って、以下のすべてにborder-boxの値を適用しています。

• 通常の要素セレクタすべて（div、p、buttonなど）
• ::beforeおよび::afterの疑似要素すべて

すべてのHTML要素にborder-boxを適用しておけば、ブラウザが要素のサイズをどう解釈するかを気にする必要はもうありません。常に、自分で指定した幅と高さどおりに表示されるようになります。