mozilla

box-sizing

概要

CSSbox-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 標準仕様に於ける規定値。widthheight プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、ボーダー、マージン領域を含みません。
padding-box
widthheight プロパティによって定義される領域内にパディング領域が含まれます。ボーダー、マージン領域を含みません。
border-box
widthheight プロパティによって定義される領域内にパディング領域及びボーダー領域が含まれます。マージン領域は含まれません。これは 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 草案  

ブラウザ実装状況

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

関連情報

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

Contributors to this page: ethertank
最終更新者: ethertank,
サイドバーを隠す