CSS paddingとborderの表示方法を指定する(box-sizing)

CSSのpaddingとborderの表示方法を指定するサンプルです。
box-sizingプロパティを使用します。

目次

box-sizing プロパティ

box-sizing : 値
説明
content-box   幅と高さにパディングとボーダー領域を含みません。(初期値)
border-box 幅と高さにパディングとボーダー領域を含みます。
値を継承しない

値をcontent-boxにした場合

box-sizingの値をcontent-boxにした場合です。

以下の四角は、CSSでwidthを300pxにheightを100pxにしました。
また、線の枠を5pxにしました。

この表の幅と高さは、幅は310pxに高さは110pxになります。
幅300px高さ100pxの四角を作りたかった場合作れていないことになります。

以下は、pxの内訳の図です。
青い部分は、300☓100で四角ができていますが、その周りにborderで上下左右に5pxずつ入っているので四角としては、幅は310pxに高さは110pxになります。

content-boxは、幅と高さに、パディング、ボーダー領域を含まないということになります。

content-box

コード

上記サンプルのコードです。

<style>
#box1{
	width:300px;
	height:100px;
	border:5px solid #000;
	box-sizing:content-box;
	margin-bottom:10px;
}
</style>

<div id="box1">box-sizing:content-box</div>

3行目でwidthを300px、4行目でheight100pxを指定しています。
6行目でcontent-boxを指定しています。

 

値をborder-boxにした場合

box-sizingの値をborder-boxにした場合です。

以下の四角は、CSSでwidthを300pxにheightを100pxにしました。
また、線の枠を5pxにしました

この表の幅と高さは、幅は300pxに高さは100pxになります。

以下は、pxの内訳の図です。
青い部分の四角は、290☓90になっています。widthを300px、hightを100pxに指定しましたが減っています。
その周りにborderで上下左右に5pxずつ入っているので四角としては、幅は300pxに高さは100pxになります。

border-boxは、幅と高さに、パディング、ボーダー領域を含むということになります。
→borderまでをboxにする。

border-box

コード

上記サンプルのコードです。

<style>
#box2{
	width:300px;
	height:100px;
	border:5px solid #000;
	box-sizing:border-box;
}
</style>

<div id="box2">box-sizing:border-box</div>

6行目でborder-boxを指定しています。
3行目でwidthを300px、4行目でheight100pxを指定しています。

 

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)

△上に戻る