最近はスマートフォン用にコーディングすることも多くなってきました。 レスポンシブなデザインの場合、borderやpaddingがあると計算とかが結構ややこしかったりします。

その時box-sizingをつかったら設計がしやすくなったのでご紹介。

box-sizingとは?

普通はwidth、padding、borderはそれぞれ固有の幅を持っています。(box-sizing: content-box ;  初期値) ですが、box-sizing: border-box;を指定してあげるとwidthpaddingborderが含まれます。

ちなみにIE6、IE7には対応していません。 Firefox、iOS4.3、Android3.0はベンダープレフィックスをつける必要があるので指定するときはこんな感じになります。

.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

一体何が便利?

計算がだいぶ楽になります。borderとpaddingを考えてwidthを計算する必要がなくなります。 可変のレイアウトを作る時なんかは1カラム、2カラム、3カラムそれぞれwidthを計算してそっからpaddingを引いて… なんてややこしい計算が減ります。

border-boxは可変レイアウトでかなり威力を発揮しそうです。 display;table-cellとかで横並びの可変レイアウトとか幅の指定が楽になりそうです。

IE6、IE7では使えないという弱点はありますが、モダンなブラウザでは使えるので使いどころを考えてうまく使いたいですね。

こちらの記事を参考にさせていただきました。ありがとうございました。

レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか? – Rriver