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

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

box-sizing プロパティ
値をcontent-boxにした場合
値をborder-boxにした場合

box-sizing プロパティ

box-sizing : 値

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

幅と高さのパディング、ボーダーの表示方法を指定します。
以下はMDNのbox-sizingプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

値を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を指定しています。