TOP > CSSリファレンス > box-sizingプロパティ

box-sizingプロパティ

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

 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