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の場合

実験2 : border-boxの場合

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

対応ブラウザについて

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;
}