JavaScriptのためのCSS要素の拡張

CSSプロパティ width と height を設定しても、要素が指定されたサイズになることは保証されません。例を見てみましょう。

例

現在、要素のサイズは指定されたものと一致しています：

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

例

次に、要素に padding プロパティを設定してみましょう。結果として、要素の実際の幅は大きくなり、指定されたパディングの値だけ拡張されます：

<div id="elem">
	text
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

例

ボーダーがある場合も要素は拡張されます：

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

例

box-sizing プロパティは、上記の動作を変更することを可能にします。パディングもボーダーも要素を拡張しないようにすることができます。そのためには、このプロパティに border-box という値を設定する必要があります：

<div id="elem">
	text
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

説明したことの重要性

JavaScriptの観点からすると、説明された状況はあまり便利ではありません。結局のところ、プロパティ width の値を読み取っても、要素がまさにその幅になることを全く確信できないことになります。