CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)

CSSの幅と高さのパディング、ボーダーの表示方法を指定するサンプルです。
box-sizingプロパティを使用します。

目次

box-sizing プロパティ

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

content-box

content-boxのサンプルです。

コード

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

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

結果

以下は上記コードで表示されるイメージ図とその内訳を表した図です。

content-box

  • 幅は上記コード3行目のwidthの300pxで表示します。両横のボーダーはそれぞれ5pxで表示します。全体の幅は合計して310pxになります
  • 高さは上記コード4行目のheightの100pxで表示します。上下のボーダーはそれぞれ5pxで表示します。全体の高さは合計して110pxになります
    →幅と高さに、パディング、ボーダー領域を含みません。

border-box

border-boxのサンプルです。

コード

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

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

結果

以下は上記コードで表示されるイメージ図とその内訳を表した図です。

border-box

  • 幅は上記コード3行目のwidthの300pxではなく290pxで表示します。全体の幅は両横のそれぞれのボーダーの5pxとあわせて300pxになります
  • 高さも上記コード4行目のheightの100pxではなく90pxで表示します。全体の高さは上下のそれぞれのボーダーの5pxとあわせて100pxになります
    → 幅と高さに、パディング、ボーダー領域を含みます。

関連の記事

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



△上に戻る