box-sizing

概要

CSS の box-sizing プロパティは、要素の幅と高さを計算する為に使用される CSS ボックスモデルの既定のルールを変更する為に用います。このプロパティを用いて、CSS 2.1 仕様と異なるボックスサイズの計算方法を採用していたブラウザの動作をエミュレートする事が出来ます。

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

content-box | border-box

box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

box-sizing: inherit

content-box: CSS 標準仕様に於ける規定値。width と height プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、ボーダー、マージン領域を含みません。
padding-box: width と height プロパティによって定義される領域内にパディング領域が含まれます。ボーダー、マージン領域を含みません。
border-box: width と height プロパティによって定義される領域内にパディング領域及びボーダー領域が含まれます。マージン領域は含まれません。これは Internet Explorer 5.5 の既定のボックスモデルと同じ計算方法であり、また、現行バージョンに於いても後方互換モード (Quirks mode) を選択した際はこの計算方法が採られます。

/* support Firefox, WebKit, Opera and IE8+ */

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

仕様書	策定状況	コメント
CSS Basic User Interface Module Level 3 The definition of 'box-sizing' in that specification.	勧告候補

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
基本サポート	1.0-webkit 9.0	1.0 (1.0) -moz [1]	8.0	7.0	3.0 (522) -webkit 5.1 (534.12)
`padding-box`	?	1.0 (1.0)	?	?	?

機能	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本サポート	(有)	1.0 (1.0)-moz [1]	Mango 7.5	(有)	(有)
`padding-box`	?	1.0 (1.0)	?	?	?

[1] box-sizing の試験段階の接頭辞付き実装には幾つかのバグがあり、少しずつ修正されています (バグ 243412)

Gecko 16.0 (Firefox 16) まではテーブルセルに対する -moz-box-sizing は不可 (バグ 338554)
Gecko 17.0 (Firefox 17) までは -moz-box-sizing: border-box 使用時に min-height / max-height CSS プロパティが動作しない (バグ 308801)

Gecko では未だ接頭辞無しの実装は為されていません。