CSS3から追加されたbox-sigingプロパティを使用すると、paddingとborderの使用領域を要素のwidth（幅）とheight（高さ）の領域に含めてボックスの幅や高さを算出出来るようになります。

個人的なbox-sigingプロパティの使用感は、レスポンシブデザインでボックスの幅を%指定した時の計算が簡単に行えるので、可変時のレイアウトの微調整が非常にやり易いです。

【主要対応ブラウザ : バージョン】

• Google Chrome : ver. 4〜
• Firefox : ver. 2〜
• Safari : ver. 3.1〜
• IE : ver. 8〜
• Opera : ver. 9.5〜

box-sigingプロパティに指定できる値

box-sigingは以下の値を使用して要素（ボックス）のサイズの算出方法を指定します。

content-box

初期値 ）
paddingとborderの使用領域を要素の幅と高さに含めない

border-box

paddingとborderの使用領域を要素の幅と高さに含める

box-sigingの書き方

CSSに以下のように記述することでbox-sigingを有効にすることが出来ます。

box-sizing用のクラスを作成する場合

.box-sizing{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

全ての要素に適用させる場合

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

Internet Explorer 7以下の非対応を考えると、業務で積極的に使用するのはまだためらわれますが、個人運営のブログであれば、さほど気にする事なく使用できる時期まできているのではないかと思います。

【国内ブラウザ バージョン : シェア率】

• Internet Explorer 7 : 0.45%
• Internet Explorer 6 : 0.22%

（2013年10月度「StatCounter Global Stats」調べ）

• Internet Explorer 7 : 1.31%
• Internet Explorer 6 : 4.93%

（2013年10月度「Net Applications」調べ）

以上、「CSS：paddingとborderをwidthの内容領域に含めるbox-sigingプロパティ」でした。