ボックスモデルを切替える box-sizing プロパティ

CSS では視覚的要素をレイアウトするときには、矩形 (長方形) 領域の箱 (ボックス) を考えます。

それぞれのボックスは、次の４つの領域に分けて考えます。

コンテントエリア ～内容を表示する場所
パディング ～隙間の領域 (パディングは英語で「詰め物」の意味)
ボーダー ～境界線を描く領域
マージン ～ボックスの周囲の隙間領域

それぞれの領域の関係は以下の図の通りです。

さて、この関係を踏まえて box-sizing について説明します。

box-sizing プロパティでボックスモデルを切替える

box-sizing プロパティによって、「ボックスモデル」を切替えます。

ボックスモデルを切替える、ということは幅や高さなどのサイズ指定の基準を切替える、ということです。

「サイズ」という言い方の他、「ディメンション」(寸法) ともいいます。

既定の値はコンテントボックス (content-box)

box-sizing プロパティの既定値は content-box です。

この場合、CSS で幅 (width) や高さ (height) を指定すると、コンテントエリアの幅や高さを指定していることになります。

ボックスの領域の関係は上の図の通り、コンテントエリアの回りに「パディング」や「ボーダー」等があるため、 content-box 指定時は、パディングやボーダーの設定値によって、ボックスの占める幅や高さは変わります。

例えば、次の例では div 要素の幅 (width) として 300px を指定していますが、パディングやボーダーによって、ボックスの全体のサイズが変わっていることがわかりますね。

コンテントエリアを基準にするのは、含まれるコンテンツのサイズによって、柔軟にレイアウトできるので便利な場合も多いです。しかしながら、ボーダーの太さやパディングによってもボックスのサイズが変わるので、ページ全体のレイアウト等、内容によって変わってほしくない寸法の指定には不向きです。

そこで CSS3 で導入されたのが border-box という設定値です。

新たに導入された border-box

box-sizing プロパティに border-box を指定すると、サイズ指定の基準がボーダーボックスになります。

これにより、幅 (width) や高さ (height) を指定すると、コンテントエリア＋パディング＋ボーダーを含めたボックスのサイズを指定出来るようになります。

ボーダーやパディングはボーダーボックスの内側に含まれて、コンテントエリアが小さくなることでサイズが調整されます。

例えば、次の例では div 要素の幅 (width) として 300px を指定していますが、パディングやボーダーを追加しても、ボックスの全体のサイズは変わりません。

全体のサイズが変わらない代わりに、コンテントエリアに描画された "ABC" という文字は内側に入りこんで行っていますね。

ボックスモデルの違いによる表示例

それでは最後に、もうひとつボックスモデルの違いによる表示の違いをみておきましょう。

次の例では「幅 (300px) X 高さ (200px) のハンバーガーの画像」を、ボックスモデル違い (box-sizing 設定違い) の div 要素内に表示します。どちらも width: 300px 、height: 200px としています。

HTML/CSS は次の通りです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>ボックスモデル</title>
<style>
body {
	background-color: #fff;
	font-family: sans-serif;
}
div {
	width: 300px;
	height: 200px;
	background-color: #64FFDA;
}

.cb {
	box-sizing: content-box;
}

.bb {
	box-sizing: border-box;
}
</style>
</head>
<body>

<h2>CONTENT-BOX</h2>

<p>box-sizing: content-box; width: 300px;</p>
<div class="cb"><img src="box-model-w300.jpg" alt=""></div>

<p>+ "border:10px solid #000;"</p>
<div class="cb" style=" border:10px solid #000;"><img src="box-model-w300.jpg" alt=""></div>

<p>+ "border:10px solid #000; padding:5px;"</p>
<div class="cb" style="border:10px solid #000; padding:5px;"><img src="box-model-w300.jpg" alt=""></div>

<h2>BORDER-BOX</h2>

<p>box-sizing: border-box; width: 300px;</p>
<div class="bb"><img src="box-model-w300.jpg" alt=""></div>

<p>+ "border:10px solid #000;"</p>
<div class="bb" style=" border:10px solid #000;"><img src="box-model-w300.jpg" alt=""></div>

<p>+ "border:10px solid #000; padding:5px;"</p>
<div class="bb" style="border:10px solid #000; padding:5px;"><img src="box-model-w300.jpg" alt=""></div>

</body>
</html>

コンテントボックスの場合

box-sizing プロパティを content-box に指定した場合は次のように、コンテントエリアが一定で画像と同じサイズなので、ボーダーを設定、パディングを設定していくと全体のボックスは大きくなるものの、div 要素の中にとどまります。

box-sizing プロパティの既定値は content-box ですので、何も指定しない場合も同様の動作になります。

ボーダーボックスの場合

box-sizing プロパティを border-box に指定した場合は次のように、コンテントエリアに加えてパディングとボーダーを含む部分のサイズが一定になるので、パディングやボーダーの幅を指定すると、コンテントエリアは小さくなるので画像がはみ出ています。

もちろん、border-box にすれば必ず中身がはみ出るというわけではなく、画像のサイズを調整するとか、 div 要素の背景画像として画像を表示するなどの方法があります。

背景画像については「CSS の background-size での cover、contain、auto の違い」なども参考にしてください。

以上、box-sizing プロパティの設定による表示の違いについて、実例をあげて説明しました。