CSS3 の box-sizing が超便利!padding や border で width と height に悩まない!

paddingやborderでもうイラつかない!box-sizingのススメ

width を指定した後に paddingborder を指定すると意図しないレイアウトになった経験ありませんか?

そんなこともこれで全て解決!そう、box-sizingならね。

box-sizing プロパティとは

box-sizingプロパティは、要素のサイズの算出方法を指定する場合に使用されます。

値の説明
content-box(初期値) padding と border の 値 を 要素 の width と height に含めない
border-box padding と border の 値 を 要素 の width と height に含める

簡単に言うと、
content-box は padding と border を外側に付けるよ!
border-box は padding と border を内側に付けるよ!
って解釈でいいと思います。

box-sizing プロパティを使うとどう見えるか

実際に使うとどうなるのか画像にしてみました。
条件は両方とも

width:300px;
padding:30px;
border:solid 5px #FC5C5C;

です。

box-sizing:content-box;(初期値)の結果

content-boxの結果

width が300pxを大きく超え、( padding + border ) * 2 の70pxオーバーします。

box-sizing:border-box;の結果

border-boxの結果

width が300pxのままで、( padding + border ) * 2 の70pxは要素の内側に来ています。

スポンサーリンク

box-sizing プロパティの使い方

要素に対し、CSSで

box-sizing:border-box;

を追加すれば、使えます。

ただ毎回記述するのは手間なので、すべての要素に対して box-sizing:border-box; を追加してしまう方が楽なので、リセットスタイルの中に

*, *:before, *:after {
    box-sizing:border-box;
}

を追加しちゃいましょう。

box-sizing プロパティの各ブラウザ対応状況

Can I useで見て分かる様に、モダンブラウザでは全て使えます。

IEの6,7では使えないので、IE6,7にも対応をしなくてはいけないサイトでは残念ながら使えません。

以上、box-sizingプロパティのススメでした。

スポンサーリンク

コメント欄

コメントを書く

RELATED POST

関連記事

NEW POST

新着記事はこちら