今回は CSS3 から box-sizing について紹介します。

あるボックスの、width や height と同時に border や padding を指定して、レイアウトが崩れてしまったという経験はありませんか?

原因はコーディングの通りなのですが、ボックスモデルのサイズ算出方法がちょっと複雑なのが原因でもあります。

どれくらい複雑なのかは、下記の記事の「なぜ便利なのか」の項目をご覧ください。

レイアウト崩れの原因の多くは、border や padding (marginも?)の値を考慮せずにレイアウトしてしまうコトが多いかと思います。

そんな面倒な問題を解決してくれるのが box-sizing プロパティです。コレを指定することでボックスサイズ(width, height) の算出方法を変更することができます。

詳しく見ていきましょう。

box-sizing プロパティとは

結論

border-boxを指定すると、border や padding のプロパティがなんであれ、ボックスサイズ(width や height) の大きさのみに従います。

そうじゃないのが、content-box です。content-boxは初期値(デフォルト)で、要素の大きさを、width + padding + border の合計で計算されます。

box-sizing プロパティには、3つの値があります。

特徴
content-box padding と border の幅を要素の幅と高さに含めない(デフォルト値)
border-box padding と border の幅を要素の幅と高さに含める
inherit  親要素の値を継承する

ちなみに、(気取って)MDN の box-sizing の概要を見てみましょう。

CSS の box-sizing プロパティは、要素の幅と高さを計算する為に使用される CSS ボックスモデル の既定のルールを変更する為に用います。このプロパティを用いて、CSS 2.1 仕様と異なるボックスサイズの計算方法を採用していたブラウザの動作をエミュレートする事が出来ます。

あんま、よくわかんないっすね。実例で見てみましょう。

名前 ボックス幅
border-box(図の上) padding と border の幅が何であろうが、

要素の幅(width=220px)に含めるので 全体の幅が width (220px)の値になる

content-box(図の下) padding(20×2=40px) と border(10×2=20px) の幅を要素の幅と高さに含めないので、

全体の幅が width + padding + border の合計(280px)になる

参考:「×2」してるのは左右の幅があるからです

content-boxの幅は下記のような内訳となっています。

引用「paddingやborderはもう書かない!?超便利なbox-sizingの使い方 | NESTonline Blog」

オススメの設定「ユニバーサルセレクタで適用する」

ユニバーサルセレクタとは「全ての要素に適用する」ということで、セレクタに「*」を使います。
これで、すべての要素に box-sizing: border-box; を指定すると余計な計算をしなくて済みます。
サイトを作る際、reset.css や normalize.css に下記の指定を加えるといいでしょう。

各ブラウザの box-sizing 対応状況

Can I Use を見てみると、IE6 や IE7 以外は対応していることがわかります。IE7は気にしなくていいという場合は積極的に使っていきたですね。IE7で閲覧している方は、ここ1年間で見ても全体の1%以下みたいです。

ちなみに、2001年に公開されたIE6を基準にウェブサイトを作っていた時代(当時は圧倒的なユーザー数だったみたいです)、widthとpaddingやborderを同時に指定するのはご法度でした。ボックスの計算方法がIE6とその他のブラウザでは違うため、カラム落ちを起こしたり問題が多かったらしです。

参考リンク