CSS3のbox-sizingはpaddingを含めたwidthを指定できる

widthは幅であるが、paddingとborderを含めないため、厳密にはwidth+padding+borderが実質的な幅になっている。
この仕様が分かりづらく、例えばtable>tdの幅を100pxにしたい場合は、padding:3px;width:94pxなんてしていた。

しかしbox-sizingプロパティを使うとwidthに指定した値が幅になり、paddingとborderの値を引いてくれる。
つまり幅を100pxにしたい場合はwidth:100pxと書けば良くなり、paddingが3pxでも10pxでもwidthは100pxを維持してくれる。

box-sizingの使い方

table td {
    padding:10px;
    width:100px;
    /* borderとpaddingをwidthに含める */
    box-sizing:border-box; /* CSS3, IE8~, Opera8~ */
    -moz-box-sizing: border-box; /* Mozilla系 */
    -webkit-box-sizing: border-box; /* Safari, Chrome系 */

    /* "content-box"にすると従来通りになる */
}

上記の例はtdにwidthとpaddingを設定したものだが、通常であれば幅は100+10+10で120pxになる。
しかしbox-sizingをborder-boxにしているので、幅はwidthに設定した100pxになる。

実験1 : content-boxの場合

width:100px width:100px width:100px

実験2 : border-boxの場合

width:100px width:100px width:100px

一目瞭然、死ぬほど便利。

対応ブラウザについて

対応ブラウザ 対応バージョン ベンダープレフィックス
Chrome 1~ 必要(-webkit-)
safari 3~ 必要(-webkit-)
Firefox 2~ 必要(-moz-)
opera 8~ 不要(-o-)
IE 8~ 不要(-ms-)

IE7以下を切り捨てればほぼOK。
もちろんスマホはほぼ全てのブラウザが対応。

IE7以下対応案件以外では、強気に下記の指定をデフォルトにして構わない。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

あわせて読みたい

コメントを残す