box-sizingプロパティについて

【装飾機能】border、paddingの値を含めるか含めないかを指定できる。

content-box
パディングとボーダーを幅と高さに含めない(デフォルト値)
border-box
パディングとボーダーを幅と高さに含める
デザインする時、余白や枠線も含めて幅と高さを計算しなくてすむ。

ボックスの幅・余白・枠線は
width: 300px;、border: 10px、padding: 10px;で指定

300px

何も指定なし

ボックス幅がwidth値よりはみ出してしまう。

通常はこの表示になる。
デザイン時、余白や枠線の値も考えながら全体のボックスデザインが必要になる。

300px

border-boxを指定

ボックス幅がwidth値にピッタリおさまる。

■CSS(ベンダープレフィックス追加)
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

【対応ブラウザ】
IE8~、firefox2~、chrome1~、safari3~、opera8~
※ベンダープレフィックスを追加した場合

300px

content-boxを指定

ボックス幅がwidth値よりはみ出してしまう。

■CSS
box-sizing: content-box;

何も指定していない時と同じ表示になる。
だからあえて使う必要はないかもしれない。

参考:http://www.htmq.com/css3/box-sizing.shtml