備忘録的プログラミングリファレンス

box-sizingプロパティ

　box-sizingプロパティは、paddingとborderをboxの領域に含めるか、含めないかを設定できます。

　box-sizing: border-box;をしなければpaddingとborderを指定するとその分だけエレメントの領域が外側に広がります。
　border-box値を設定すると、paddingとborderは領域内に含めます。そのために利用できる領域が小さくなります。 ただし、注意しなければならない点があります。border-boxを設定した場合にその子要素の位置がズレることがあります。

　初期値はcontent-boxで、paddingとborderは領域の大きさに含めません。

box-sizing: border-box;

構文(Syntax)

CSS

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

DOM(JavaScript)

値の取得
String = trobject.style.boxSizing
値の設定
object.style.boxSizing = "content-box | border-box | initial | inherit"

値（Values）

Value摘要
content-boxwidth値+padding値+border値
border-boxpadding値 + border値 = width値
initial初期値に戻す
inherit親要素の値を継承

備考（Remarks）

初期値（Default value）content-box
継承（Inherited）no
変化（Animatable）no

Example