CSS box-sizing 属性

定義と使用方法

box-sizing 属性は、特定の領域に一致する特定の要素を特定の方法で定義するために使用されます。

例えば、2つのボーダー付きのフレームを並排に配置する必要がある場合、box-sizing を "border-box" に設定することで、ブラウザが指定された幅と高さを持つフレームを表示し、ボーダーや内余白をフレーム内に含めることができます。

さらに参照してください：

CSS3 チュートリアル：CSS3 ユーザーインターフェース

HTML DOM リファレンスマニュアル：boxSizing 属性

例

並排に配置される2つのボーダー付きのフレームを指定します：

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

実際に試してみてください

ページの下部にはさらに例があります。

CSS 文法

box-sizing: content-box|border-box|inherit;

属性値

値 説明
content-box

これは CSS2.1 で規定された幅と高さの行動です。

幅と高さはそれぞれ要素のコンテンツボックスに適用されます。

幅と高さの外に要素の内余白やボーダーを描画します。
border-box

要素に設定された幅と高さは、要素のボックスの大きさを決定します。

つまり、要素に指定された内余白やボーダーは、設定された幅と高さの内で描画されます。

設定された幅と高さからボーダーや内余白を引くことで、内容の幅と高さを得ることができます。
inherit 親要素から box-sizing 属性の値を継承することを指定します。

技術的詳細

デフォルト値： content-box
継承性： いいえ
バージョン： CSS3
JavaScript 文法： object.style.boxSizing="border-box"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

前缀を使用する最初のバージョンの数字には -webkit- または -moz- が含まれています。

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5