box-sizing

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSS の box-sizing プロパティは、要素の幅と高さを計算するために使用される CSS ボックスモデル の既定のルールを変更するために用います。このプロパティを用いて、CSS ボックスモデル仕様を正しくサポートしていないブラウザーの動作をエミュレートすることができます。

初期値content-box
適用対象width および height を受け付ける全ての要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
box-sizing: content-box;
box-sizing: border-box;

/* グローバル値 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

content-box
CSS 標準仕様における初期値および既定値。widthheight プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、ボーダー、マージン領域を含みません。注記: パディング、ボーダー、マージンはボックスの外側に置かれます。例えば .box {width: 350px;} に対して {border: 10px solid black;} を適用すると (ブラウザーのレンダリング結果は) .box {width: 370px;} になります。
簡単に言うと、要素の寸法は 幅 = コンテンツの幅高さ = コンテンツの高さ (ボーダーやパディングの値を除く) になります。
border-box
widthheight プロパティによって定義される領域内にパディング領域およびボーダー領域が含まれます。マージン領域は含まれません。これはドキュメントが後方互換モード (Quirks mode) であるときに Internet Explorer が使用する ボックスモデル です。注記: パディングやボーダーは、ボックスの内側に置かれます。例えば .box {width: 350px; border: 10px solid black;} は、ブラウザーで width: 350px のボックスがレンダリングされます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために border-box を使用することはできません。
要素の寸法は 幅 = ボーダー + パディング + コンテンツの幅高さ = ボーダー + パディング + コンテンツの高さ になります。
padding-box
widthheight プロパティによって定義される領域内にパディング領域が含まれます。ボーダー、マージン領域を含みません。Firefox だけがこの値を実装していました。また、Firefox 50 で廃止しました。

形式的構文

content-box | border-box

/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
box-sizing の定義
勧告候補 初期定義

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 -webkit[1]
10.0
(有)-webkit
(有)
1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)[2]
8.0[1] 7.0 3.0 (522)-webkit
5.1[3]
padding-box 未サポート 未サポート 1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)
50.0 (50.0) で廃止
未サポート 未サポート 未サポート
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 2.1-webkit[1]
4.0
(有)-webkit
(有)
1.0 (1.0)-moz[1]
29.0 (29.0)[2]
9.0 (有) (有)
padding-box 未サポート 未サポート 1.0 (1.0)-moz[1]
29.0 (29.0)
50.0 (50.0) で廃止
未サポート 未サポート 未サポート

[1] Internet Explorer (すべてのバージョン)、Firefox 23 より前のバージョン、Chrome では、window.getComputedStyle() から高さが計算される場合に box-sizing が守られません。Edge ではこの問題が発生しません。なお、IE9 独自の currentStyle プロパティは、height の正しい値を返します。

[2] 接頭辞がないプロパティのサポートに加えて Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) で、ウェブ互換性の理由から、-webkit 接頭辞つきプロパティをサポートしました。これは設定項目 layout.css.prefixes.webkit で制御しており、既定値は false です。Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) より、設定項目の既定値は true です。

[3] ベンダー接頭辞 -webkit534.12 で削除しました。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, Sebastianz, ethertank
 最終更新者: yyss,