例
ことを指定<div>要素は、パディングとボーダーは、要素の全体の幅と高さに含まれている必要があります。
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
»それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
ボックスのサイズ変更プロパティは、サイジング特性どのブラウザ指示するために使用されます(width and height)含まれている必要があります。
彼らはボーダーボックスを含める必要がありますか？ それとも（幅と高さのプロパティのデフォルト値です）コンテンツボックス？
| デフォルト値： | content-box |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.boxSizing="border-box" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
| プロパティ | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSSの構文
box-sizing: content-box|border-box|initial|inherit;プロパティ値
| 値 | 説明 |
|---|---|
| content-box | デフォルト。 幅と高さのプロパティ(and min/max properties)のみコンテンツを含んでいます。 ボーダー、パディング、またはマージンが含まれていません |
| border-box | 幅と高さのプロパティ(and min/max properties)マージンコンテンツ、パディングとボーダーを含んではなく、 |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
関連ページ
CSS3のチュートリアル： CSS3ボックスサイジング
HTML DOMリファレンス： boxSizing property