【CSS3のbox-sizingで余白計算の煩わしさから解放される方法】

こんな経験ありませんか？

960pxのコンテナにCSSで余白を調整するために左右10pxずつpaddingを設定したら、枠をはみ出して横スクロールバーが表示されてしまった。そんな経験ありませんか？

お勧めできない方法

横幅が左右10pxずつ（合計20px）広がってしまうので、コンテナを940pxに変更するのはお勧めできません。

計算上は正しいのですが、余白を調整するたびにコンテナのwidthを計算し直すのは大変ですよね？

お勧めの方法

全てのHTMLタグに対して、CSS3のbox-sizingをあらかじめ割り当てておきます。

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

こうすれば、内側の余白（padding）をどのように変更しても、コンテナのサイズは960pxのまま影響を受けません。簡単ですね。

ちなみに、* は「全称セレクタ」といい、全てのHTMLタグを指し示すワイルドカードのようなものです。

なぜbox-sizingで解決するのか？

デフォルトでは、widthとheightにpaddingとborderの大きさを足した合計がボックスのサイズとなります。だから、paddingやborderを付けるとその分だけボックスのサイズが大きくなり、枠からはみ出してしまいます。

box-sizingを使うと、widthとheightだけでボックスのサイズが計算されるようになります。

例えばwidth:960px、padding:10px、border:1px とすると、ボックスサイズは960pxで、その内側に1pxのボーダーと10pxの余白が生まれます。
詳しくは「ボックスモデル」でグーグル検索してみてください。

CSSのレイアウトコーディングにおいて、余白の概念を正しく理解しておくことがとても大切です。