CSS3のbox-sizingプロパティを使うことで、ボックスサイズの算出方法を指定できます。ボックスの縦横サイズの初期値は、paddingとborderのサイズを含めません。例えば、ボックスのwidthが600pxで、「padding:25px」、「border-width:15px」の場合、実際に占有するwidthは680pxになります(sample1)。

ボックスの数が少なければ、あまり問題になりませんが、これが多数で複雑にからみあうレイアウトになってくると計算がたいへんです。そんなときにbox-sizingプロパティを使って「box-sizing: border-box;」と指定すれば、paddingもborder-widthも含めてwidthとして扱えます(sample2)。

box-sizingプロパティの値

box-sizing: content-box
ボックスの幅、高さにpaddingとborderのサイズを含めません(初期値)。
box-sizing: border-box
ボックスの幅、高さにpaddingとborderのサイズを含めます。
box-sizing: inherit
親要素の値を継承します。

比較用のふたつのボックスとそのソース

実際のソースには、古いブラウザ用にベンダープレフィックスを付けています。
( sample1 ) box-sizing: content-box
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
( sample2 ) box-sizing: border-box
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
.sample1  {
	width:600px;
	padding:25px;
	border:15px solid #f66;
	box-sizing: content-box;
	background:#fdf;
	margin:10px auto;
	}
.sample2  {
	width:600px;
	padding:25px;
	border:15px solid #f66;
	box-sizing: border-box;
	background:#fdf;
	margin:10px auto;
	}
戻るボタン