【box-sizing】 CSS3で bordar や padding を含めた横幅を指定する

CSS3で新しく追加されたプロパティの中に、「box-sizing」があります。

このプロパティを使用する事で、『要素のwidth値にpadding と borderの値を含める、含めない』を定義する事が出来ます。

このプロパティを使用する事で、リキッドレイアウトデザイン時に横幅を％で指定した場合などに、padding と borderの値を気にせずレイアウトを組めるようになります。



使用できるブラウザは
・Firefox 3
・Safari 3
・Opera
・Internet Explorer 8（ベータ版）
となり、主要なモダンブラウザでの使用が可能となっている。

プロパティ値
・content-box
「padding と borderの大きさは含まない」
・border-box
「padding と borderの大きさは含める」
・padding-box (※FireFoxのみ)
「padding の大きさは含める bordar は含まない」

view plainprint?

1. div#content-box {  
2.  -webkit-box-sizing: content-box;　/* Safari,Google Chrome用 */  
3.  -moz-box-sizing: content-box;　/* Firefox用 */  
4.  -ms-box-sizing: content-box;　/* Internet Explorer 8用 */  
5.  box-sizing: content-box;　/* Opera用 */  
6. }  
7. div#border-box {  
8.  -webkit-box-sizing: border-box;　/* Safari */  
9.  -moz-box-sizing: border-box;　/* Firefox */  
10.  -ms-box-sizing: border-box;　/* Internet Explorer 8 */  
11.  box-sizing: border-box;　/* Opera */  
12. }  

div#content-box {
 -webkit-box-sizing: content-box;　/* Safari,Google Chrome用 */
 -moz-box-sizing: content-box;　/* Firefox用 */
 -ms-box-sizing: content-box;　/* Internet Explorer 8用 */
 box-sizing: content-box;　/* Opera用 */
}
div#border-box {
 -webkit-box-sizing: border-box;　/* Safari */
 -moz-box-sizing: border-box;　/* Firefox */
 -ms-box-sizing: border-box;　/* Internet Explorer 8 */
 box-sizing: border-box;　/* Opera */
}

非常に強力な機能を有するHTML5、CSS3ですが、少し前まではクライアント環境が追いついていない理由もあって、中々手が出しにくい状況にあったのではないでしょうか？

しかし、ここ最近は大分その存在も普及し、角丸やグラデーションといったCSS３の中でもメジャーな機能は、かなりのサイトで見かけるようになりました。

かくいう私もここ最近でやっとCSS3を触りだした者の内の一人なんですが。

気付けばIE6のシェアも大分おちてきてますからねー！