| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {box-sizing: 値 } |
| 値 の形式 | content-box，padding-box，border-box，inherit |
| 初 期 値 | content-box |
| 対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch10+ / Sa5.1+ |
| 適用可能な要素 | width プロパティ と height プロパティ が指定できるすべての要素 |
| 継 承 | しない |
box-sizingプロパティ は，ボックスの各サイズの算出方法 を指定します。
指定できる値の形式は，基本的には，content-box，padding-box，border-box の３つのキーワードのうち１つで， 指定したボックスを基準に各部のサイズを算出します。
| 値 | 説 明 |
|---|---|
| content-box | CSS2.1 におけるサイズ（幅と高さ）の計算方法です。 （初期値） 指定した width や height プロパティの値，および，それらの min/max プロパティの値は コンテンツボックス（content-box）の幅と高さとして適用されます。 padding による余白部分や境界部分は指定された幅と高さでこのボックスの外の領域に確保されます。 |
| padding-box | 指定した width や height プロパティの値，および，それらの min/max プロパティの値は パディングボックス（padding-box）の幅と高さとして適用されます。 従って，padding による余白部分はこのボックスの内部に確保されます。 コンテンツボックスの幅や高さは，width や height プロパティの値から，paddingの幅を引いた値になります。 |
| border-box | 指定した width や height プロパティの値，および，それらの min/max プロパティの値は 境界ボックス（border-box）の幅と高さとして適用されます。 境界部分や padding による余白部分は指定された幅と高さでこのボックスの内部の領域に確保されます。 それだけ コンテンツボックスの幅や高さが小さくなります |
| inherit | 親要素の指定を継承します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample { width: 30%; padding: 2em;
border: solid 1.5em #99CC99;
background-color: yellow;
background-origin: content-box;
}
div.sample div { background-color: aqua; }
div.boxsiz2 {
box-sizing: content-box;
}
div.boxsiz1 {
box-sizing: border-box;
margin-left: 3.5em;
}
div.boxsiz3 {
box-sizing: padding-box;
margin-left: 2em;
}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample boxsiz1"> <div>ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ</div> </div> <br> <div class="sample boxsiz2"> <div>ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ</div> </div> <br> <div class="sample boxsiz3"> <div>ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ</div> </div> <br> |
| ブラウザー 表示例 |
|---|
| ↓↓↓box-sizing: content-box; （ボックスの width はコンテンツボックスのサイズです）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓box-sizing: border-box; （ボックスの width は境界ボックスのサイズです） ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓box-sizing: padding-box; （ボックスの width は パディングボックスのサイズです） ああああああああああああああ
ああああああああああああああ ああああああああああああああ |
現状では，多くのブラウザーで値に padding-box を指定しても反映されません。 （Firefox は対応済みです。）