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

box-sizingプロパティ

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

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

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

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