CSS box-sizing — 幅と高さの適用方法を制御

CSSbox-sizing プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。

CSS ボックスモデルの既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。

box-sizing プロパティは上記の振る舞いを調整するために使用できます。

  • content-box は CSS box-sizing の既定の振る舞いです。要素の幅を100ピクセルに設定した場合、要素のコンテンツ領域の幅は100ピクセルになり、境界線やパディングを加えたものが最終的にレンダリングされる幅になります。
  • border-box は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定をもっと簡単になります。

メモ: 新しいウェブサイトでは、 box-sizing の値を border-box に設定し始めたくなるかもしれません。これによって要素の寸法の扱いがずっと簡単になり、一般にコンテンツをレイアウトする際に遭遇する可能性のあるいくつかの落とし穴がなくなります。

構文

box-sizing プロパティは、以下のいずれか1つのキーワードを選択して定義します。

content-box
これは、 CSS 標準仕様で規定されている初期値および既定値です。 width および height プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば .box {width: 350px; border: 10px solid black;} は 370px の幅のボックスを描画します。
この場合、それぞれの要素の寸法は、 幅 = コンテンツの幅高さ = コンテンツの高さ として計算されます(境界線やパディングの値を除く)。
border-box
width および height プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば .box {width: 350px; border: 10px solid black;} は、ブラウザーで 幅350px のボックスとして描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために border-box を使用することはできません。
この場合、それぞれの要素の寸法は、 幅 = 境界線 + パディング + コンテンツの幅高さ = 境界線 + パディング + コンテンツの高さ として計算されます。

形式文法

content-box | border-box

この例では、2つの box-sizing の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* 全体の幅: 160px + (2 * 20px) + (2 * 8px) = 216px
     全体の高さ: 80px + (2 * 20px) + (2 * 8px) = 136px
     コンテンツ領域の幅: 160px
     コンテンツ領域の高さ: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* 全体の幅: 160px
     全体の高さ: 80px
     コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
     コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

結果

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
box-sizing の定義
勧告 初回定義
初期値content-box
適用対象width および height を受け付ける全ての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
box-sizingChrome 完全対応 10
補足
完全対応 10
補足
補足 box-sizing is not respected when the height is calculated from window.getComputedStyle().
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 29
完全対応 29
完全対応 1
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 8
補足
完全対応 8
補足
補足 box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera 完全対応 7Safari 完全対応 5.1
完全対応 5.1
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4
補足
完全対応 4
補足
補足 box-sizing is not respected when the height is calculated from window.getComputedStyle().
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 18
補足
完全対応 18
補足
補足 box-sizing is not respected when the height is calculated from window.getComputedStyle().
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 29
完全対応 29
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 6
完全対応 6
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
padding-box
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 50IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 50Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報