【CSS】ボックス幅の計算が簡単になる「box-sizing」の使い方

ブロック要素の横幅は、width（height）だけではなくpaddingとborderの幅も加算されます。

レイアウト時のこの計算がけっこうめんどくさいんですが、CSS3のbox-sizingプロパティを使うと計算が超簡単に！というか計算する必要がなくなります。

box-sizingとは

ボックス幅の算出方法を指定するプロパティです。

デフォルトの値はcontent-boxで、width（height）にpaddingとborderを加えた幅が実際のボックス幅となります。

値にborder-boxを指定すると、width（height）に指定した値がそのまま要素の幅となり、paddingとborderを含めたサイズで描画されます。

それでは実際に挙動の違いを見てみましょう。

実際の挙動

同じスタイルのボックスを2つ用意し、片方のみbox-sizing: border-box;を指定しています。

HTML

CSS

DEMO

BOX1の実際の横幅が250+50+50の350pxなのに対し、BOX2はwidthに指定した250pxのままになっています。

まとめ

使い勝手が良い上に理解するのも簡単！CSS3ですがほぼ全てのブラウザ（IEは8以上）が対応しているので、使える所はどんどん使っていきましょう。

ちなみにスマートフォン用サイトの横幅指定（width: 95%;とか）のときに使うと幸せになれます。