box-sizing:要素の幅や高さを計算する祭に余白や境界線の範囲をどのように扱うべきかを指定する

初期値 content-box
適用対象 widthheightが機能する全ての要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

box-sizingプロパティの説明

box-sizingは、要素の幅や高さを計算する祭に余白や境界線の範囲をどのように扱うべきかを指定します。これによりwidthheightで表されるサイズが、borderpaddingの範囲を含めるか否かを定義します。

HTMLの各要素は、CSSのボックス・モデルに基づいて四角形の箱としてレイアウトされます。この箱は4つの仮想区域を持っており、それぞれコンテンツ(内容)、パディング(内側の余白)、ボーダー(境界線)、マージン(外側の余白)に分類できます。

要素全体の幅や高さを決定するには、どの領域を含めるか除外するかを定義しておかなければなりません。box-sizingは、この振る舞いを制御するためのプロパティです。

box-sizingに指定できる値

content-box
widthおよびheightで示される寸法は、パディング、ボーダー、マージンを除くコンテンツ領域のみとなります。全ての値を0にした場合は、幅や高さの指定に従い最終的な表示サイズが決定されます。しかし、余白や境界線を追加した場合は、その分だけ要素の配置に必用な領域が膨張します。このような仕様を、標準ボックス・モデルと表現します。
border-box
widthおよびheightで示される寸法は、パディング、ボーダーを含むものであるとみなされます。これは、余白や境界線を拡張していくと、その分だけ要素の内側が圧縮されるという意味です。つまり、コンテンツの表示位置は、余白や境界線の値に依存します。このような仕様を、代替ボックス・モデルと表現します。

box-sizingの使い方とサンプル

box-sizingプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
box-sizing: border-box;
box-sizing: content-box;

/* グローバル値 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: unset;

box-sizingの実例

それでは実際にbox-sizingプロパティの書き方を見ていきましょう。まず初めに、このプロパティが登場してから頻繁に使われるようになったCSSリセットの一部を紹介します。

CSS
*, *::before, *::after {
	box-sizing: border-box;
}

このように記述すると、全ての要素と疑似要素のサイズ計算がborder-boxを基準に行われます。既定値であるcontent-boxのルール下でマークアップを行う場合、レイアウトの計算が非常に面倒でした。widthheightは、あくまでコンテンツを表示する範囲を示すので、borderpaddingを指定された要素は、個別にケアする必用があったからです。

続いて、同じ装飾を施した要素を用意してbox-sizingの値を変えた場合の挙動を確認します。以下の例は、同じ幅の境界線と余白を持つ<div>border-boxcontent-boxを与えた場合の比較です。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem 1rem;
	text-align: center;
}
.samp_box > div {
	width: 300px;
	height: 100px;
	margin: 1rem auto 0 auto;
	padding: 20px 10px;
	border: 5px solid #000;
}
#sizing_1 {
	box-sizing: border-box;
}
#sizing_2 {
	box-sizing: content-box;
}
HTML
<section class="samp_box">
	<div id="sizing_1">
		<span>box-sizing: border-box;</span>
	</div>
	<div id="sizing_2">
		<span>box-sizing: content-box;</span>
	</div>
</section>

box-sizingの値がborder-boxの場合は、widthheightで指定したサイズが要素の大きさとなり、borderpaddingは、要素の内側に向かって拡張します。そのため、コンテンツの表示領域は境界線と余白を除いたものとなり、最終的な内容の表示位置はこれらのプロパティの値に依存します。

box-sizingの値がcontent-boxの場合は、widthheightで指定したサイズが、コンテンツの表示範囲を意味します。上記の内容では、300pxの幅に左右の余白20pxが足され、さらに5pxの境界線が両側に引かれているので、330pxで表示されます。高さも同様に境界線と余白の範囲が足されています。

これを分かりやすくするために、背景色を追加してbackground-clipcontent-boxで切り抜きます。

表示確認

2つのボックスを比較してみて下さい。上段のボックスは黒い境界線を含む幅が300px、高さが100pxに収まっているのに対して、下段のボックスは青い背景が幅300px、高さ100pxで描画され、その外側に余白と境界線が足されています。

つまり、どちらもwidthで指定された幅とheightで指定された高さを守っているのですが、その基準が異なるのです。box-sizingは、これを変更したい時に使用します。逆に言うと、box-sizingは要素の幅や高さを決定する上で、非常に重要な要因を操作します。

この機能について詳しく理解したい方は、ボックス・モデルの解説を参照して下さい。

box-sizingに関連するCSSプロパティ

要素の幅や高さ
box-sizing 要素の幅と高さをどのように計算するかを指定する
height 要素の高さを指定する
width 要素の幅を指定する
max-height 要素の高さの最大値を指定する
max-width 要素の幅の最大値を指定する
min-height 要素の高さの最小値を指定する
min-width 要素の幅の最小値を指定する
resize ユーザーが要素のサイズを変更できるかどうかを指定する