CSS 参考手册

CSS @规则(RULES)

box-sizing CSS属性用いてデフォルトを変更するCSSボックスモデル、ブラウザは通常このモデルを使用して要素の幅と高さを計算します。

以下の表は、この属性の使用説明とバージョンハイストリを示し、javascriptスクリプトでの使用構文も含んでいます。

デフォルト値：	content-box
適用：	すべての幅または高さを受け入れる要素
継承：	ありません
アニメーション可能：	いいえアニメーション属性を確認する。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.boxSizing="border-box"

この属性の構文は以下の通りです：

box-sizing:　content-box　|　padding-box　|　border-box　|　initial　|　inherit

以下の例では、boxの使用方法を示しています。-sizing属性。

例

.box　{
　　　　width:　50%;
　　　　padding:　15px;
　　　　float:　left;
　　　　border:　5px　solid　#000;
　　　　box-sizing:　border-box;
}

以下の表はこの属性の値を説明しています。

値	説明
content-box	指定されたwidthおよびheight属性は、要素の内容のみを含みます。パディング、ボーダーやマージンを含みません。
padding-box	指定されたwidthおよびheight属性は、パディングのサイズを含みますが、ボーダーやマージンを含みません。
border-box	指定されたwidthおよびheight属性は、パディングとボーダーを含みますが、マージンを含みません。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のboxを使用します。-sizingの属性値。

box-sizing属性のブラウザの互換性について、以下の表の数字はその属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 2+ ^-moz-、29+ Google Chrome 4+ ^-webkit-、10+ Internet Explorer 8+ Apple Safari 3。2+ ^-webkit-、5。1 + Opera 9。5+

以下の内容に関するチュートリアルを参照してください：CSSボックスモデル、CSSサイズ。

関連属性：padding、border、margin。