box-sizing

概要

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

• 初期値 content-box
• 適用対象 width あるいは height プロパティを受け付ける全ての要素
• 継承 継承しない
• メディア visual
• 計算値 指定値

構文

Formal syntax:  content-box | padding-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;
}

仕様

ブラウザ実装状況

注記

[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 では未だ接頭辞無しの実装は為されていません。

関連情報

• CSS ボックスモデル