box-sizingプロパティで横幅指定の煩わしさを軽減する

CSS3から追加されたプロパティ「box-sizing」についてメモしておきます。

 

ある要素の横幅や高さにおいて、今までは「要素自体の幅 + padding値 + border値」 を合わせた数値が、その要素幅になり。要素自体に指定する width値 もしくは height値 から padding値 + border値 を差し引いた値を width もしくは height に割り当てなければならない場面が多々ありました。実際かなり煩わしい作業であり、横幅もしくは高さが一目でわからないために面倒な計算をする羽目になることもしばしば・・・。

 

そんな時、このborder-sizingプロパティに対して、border-boxを指定することで、要素の横幅（高さ）を変えることなく、padding や border を表現してくれます。

 

実際に目で確認したほうが伝わりやすいかもしれませんので確認用のサンプルをご確認ください。

 

デモサンプル

サンプル用HTMLとCSS

▼イメージ図

.sample は共通のCSSで、「BOX2」のみ .sizeArea で「box-sizing: border-box;」を指定しています。このように、box-sizingプロパティに border-box を指定することで、padding値 と border値 を含めた要素の横幅（高さ）で表現するようになります。

 

◆ box-sizingプロパティ対応状況

◯	（◯）	◯	◯	◯	（◯）	（◯）

 AndroidとiOS,Firefoxに関しては、念のためベンダープレフィックスを付けた方が良いかもしれませんので、正式には下記のように記述しておくことをオススメします。

 

以上になります。