box-sizing プロパティ
box-sizing プロパティは、padding と border の大きさをエレメントの width、height の値内に収めるか、収めないかを指定するプロパティです。
padding と border の指定によってエレメント全体が想定外に大きくしないようにすることができます。
box-sizing: border-box;
詳しくはExample
を参照してください
デフォルトでは padding やborder のサイズを指定するとその分だけエレメントが大きくなります。
box-sizing プロパティの border-box 値は、padding と border をエレメントの領域内に含めます。
そのために利用できる領域が小さくなります。
さらに注意点として、border-box を設定した場合にその子エレメントの位置がズレることがあります。
ページ内 Index
構文(Syntax)
box-sizing の構文についてです。
CSS
box-sizing: content-box | border-box ;
DOM ( JavaScript )
String = object.style.boxSizing;
object.style.boxSizing=" content-box | border-box ";
値（Values）
以下は box-sizing に指定できる値です。
| Value | 摘要 |
|---|---|
| content-box | 初期値（default値）。paddingとborderのサイズをエレメントのサイズ指定値に含めない |
| border-box | paddingとborderのサイズをエレメントのサイズ指定値に含める |
その他に以下のようなグローバル値があります。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
詳しくは各キーワード値のページを参照してください。
備考（Remarks）
box-sizing の備考についてです。
| 初期値（Default value） | content-box |
| 継承（Inherited） | no |
| CSS Animation | no |
Example
box-sizing の例です。
box-sizing プロパティは、padding と border の大きさをエレメントの width、height の値内に収めます。
以下の例では、box-sizing の値によってエレメントが padding、border のサイズの指定値分だけ大きくなるかを示しています。
上はデフォルトの値 content-box です。padding や border の値によってエレメントのサイズがより大きくなります。「 width 値+ padding 値+ border 値」になります。
下は border-box 値です。padding や border はエレメントの width、height の値内に収まるように表示されます。「 width 値 = padding 値 + border 値」になります。
この例では margin プロパティも指定しています。