css,javascript,actionscriptを中心に勉強したことをまとめるブログ

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

box-sizingとは

box-sizingを指定することで、要素の幅、高さの値に余白（padding）や線（border）の値を含めるかどうかを設定できます。

記述方法

box-sizing: 値;

値に下記の値を入れることで設定ができます。

box-sizing: border-box; // padding、borderの値をwidthに含める
box-sizing: content-box; // padding、borderの値をwidthに含めない（デフォルト）

です。
各ブラウザでは頭に記号を追加することで動作するようになります。

■webkitの場合
-webkit-box-sizing: border-box;

■mozillaの場合
-moz-box-sizing: border-box;

■IEの場合
-ms-box-sizing: border-box;

対応ブラウザ

上記のように記述することで動作するブラウザです。
IEは8から対応していますね。

• Firefox2～
• Safari3.1～
• Chrome0.2～
• Opera9.6～
• IE8～

サンプルコード

CSS3サンプル / box-sizing

実はこのプロパティって割と使えるのではないかと思っています。
特に、cssの記述を使いまわしたいときなんかに良さそうです。

例えばデザイン性は同じで幅だけちがうようなタイトルの場合

.title01 {
    width:100%;
    //　共通の記述
}

幅を100%にしておけば親要素の幅次第で可変するようになります。
ただ以前は、この共通の記述のところにpaddingが入ってしまったりすると幅が変わり、100%以上になってしまってうまくいかなかったんです。
css3を使えるようになれば、box-sizingを指定するだけで、paddingが入ろうが、borderをつけようが幅がはみ出てしまうことはありません。

.title01 {
    width:100%;
    box-sizing: border-box; // padding、borderがあっても平気
    //　共通の記述
}

便利でしょ？

参考サイト

CSS3のbox-sizingでpadding・borderをwidth、heightに含めてみる - HouseTect