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  {
	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;
	}