定義と使い方

box-sizingプロパティは、要素のサイズ（Size）を計算する際に基準となる領域（Area）を定義します。

要素のサイズ（Size）を計算する際の基準となる領域（Area）には、2つの種類があります。

  • content-box
    コンテンツ領域（Content Area）のみをサイズ（Size）の計算に含めます。
  • border-box
    コンテンツ（Content）、パディング（Padding）、境界線（Border）領域まですべて含めてサイズを計算します。

content-boxとborder-boxのサイズ計算基準の違いを図で確認してみましょう。
図の各色の領域はコンテンツ（Content）、パディング（Padding）、境界線（Border）を表しています。

box-sizing
content-box vs. border-box

基本例

次の例で、box-sizingプロパティがどのように実装されるかを確認してみましょう。

HTML 
<div class="div-a">Div-A</div>
<div class="div-b">Div-B</div>
CSS 
div {
    width: 150px;
    height: 150px;
    padding: 50px;
    border: 5px solid gold;
}
.div-a {
    box-sizing: content-box; /* コンテンツ（Content）領域のみ計算 */
}
.div-b {
    box-sizing: border-box; /* コンテンツ（Content） + パディング（Padding） + 境界線（Border）すべて含めて計算 */
}
実際に適用された様子

形式の構文

CSS 
selector {
    box-sizing: content-box | border-box;
}

構文

CSS 
/* キーワード値（Keyword values） */
box-sizing: content-box;
box-sizing: border-box;

/* グローバル値（Global values） */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

形式定義

box-sizingプロパティの形式定義
初期値 content-box
適用要素 widthやheightを許容するすべての要素
継承 いいえ
アニメーション いいえ

参考ください！
<button>要素は、ブラウザが設定した初期値がborder-boxになっています。

注意ください！
box-sizingの値にpadding-boxはありません。

値

content-boxとborder-boxのうち、要素のサイズをどちらを基準として計算するかを指定します。

content-box

  • width の計算基準 = コンテンツの幅
  • heightの計算基準 = コンテンツの高さ

content-boxは、要素の width と height をコンテンツ領域のみを考慮してサイズを計算します。
padding と border はサイズに含まれません。つまり、padding と border は要素のサイズの計算外として追加されます。

もし要素に padding や border がある場合、実際の要素のサイズよりも大きく見えます。

widthやheightを許容するすべての要素の中で、<button>要素を除けばブラウザでデフォルトとして設定される初期値です。

border-box

  • widthの計算基準 = コンテンツの幅 + padding-left + padding-right + border-left-width + border-right-width
  • heightの計算基準 = コンテンツの高さ + padding-top + padding-bottom + border-top-width + border-bottom-width

border-boxは、要素の width と height をコンテンツ領域、padding と border をすべて含めて計算します。

もし要素に padding や border があったとしても、実際の要素のサイズと同一です。

例

HTML 
<div class="div-1">div-1</div>
<br>
<div class="div-2">div-2</div>
CSS 
.div-1 {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    /* 全体の幅: 200px + (2 * 10px) + (2 * 5px) = 230px
       全体の高さ: 100px + (2 * 10px) + (2 * 5px) = 130px
       content-box width: 200px
       content-box height: 100px */
}
.div-2 {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid blue;
    /* 全体の幅: 200px
       全体の高さ: 100px
       content-box width: 200px - (2 * 10px) - (2 * 5px) = 170px
       content-box height: 100px - (2 * 10px) - (2 * 5px) = 70px */
}
実際に適用された様子

上の例からわかるように、div-1は box-sizing: content-box; に指定されているため、padding と border はサイズに含まれず、実際の width や height よりも大きく見えます。

しかし、div-2は box-sizing: border-box; に指定されているため、padding と border をすべて要素のサイズに含めて計算し、実際の width や height と同じサイズに見えます。

このように、box-sizing: content-box; よりも box-sizing: border-box; のほうが要素のサイズを指定するのに直感的です。すべての要素に box-sizing: border-box; を適用するには、次のように記述します。

CSS すべての要素に box-sizing: border-box; を適用する 
*,
::before,
::after {
    box-sizing: border-box;
}

ブラウザ互換性

box-sizingプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
box-sizing 10 12 29 5.1

仕様書

box-sizingプロパティの仕様書
仕様書
box-sizing CSS Box Sizing Module Level 3
#box-sizing

参考資料

関連項目