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

box-sizingプロパティ

 box-sizingプロパティは、paddingborderをエレメントのwidth、heightの値内に収めるか、収めないかを指定するプロパティです。

 デフォルトではpaddingborderのサイズを指定するとその分だけエレメントが大きくなります。

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

paddingやborderのサイズをエレメントのwidth、heightの指定値内に収める
box-sizing: border-box;

構文(Syntax)

CSS

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

DOM(JavaScript)

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

値(Values)

Value摘要
content-box初期値(default値)。paddingとborderのサイズをエレメントのサイズ指定値に含めない
border-boxpaddingとborderのサイズをエレメントのサイズ指定値に含める
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)content-box
継承(Inherited)no
CSS Animationno

Example

 box-sizingの例です。box-sizingの値によってエレメントがpadding、borderのサイズの指定値分だけ大きくなるかを示しています。

 上はデフォルトの値content-boxです。paddingやborderの値によってエレメントのサイズがより大きくなります。「width値+padding値+border値」になります。

 下はborder-box値です。paddingやborderはエレメントのwidth、heightの値内に収まるように表示されます。「width値 = padding値 + border値」になります。

 この例ではmarginプロパティも指定しています。