ボックスモデルとbox-sizing

ボックスモデルとは

ボックスモデルとはHTMLタグでマークアップされた要素を1つの箱（ボックス）としてみなしてwidh/height・padding・border・marginがどのような関係にあるかを示した概念のことです。

ボックスモデル概念図

borderを境界線として内側の余白がpadding、外側の余白がmarginとなります。見た目の幅はborderを含む内側の領域となります。

widthとheightはborderとpaddingを除くコンテンツの表示領域のみのサイズのことなので、CSSでのコーディングの際にはborderとpaddingのサイズを考慮し忘れないように注意する必要があります。borderとpaddingのサイズが0であればwidthとheightは見た目の幅と一致するので問題ありません。

box-sizing

box-sizingのプロパティを使うとボックスモデルのwidth/heightの計算方法を指定することができます。

初期値はcontent-boxで通常のボックスモデルと同じ計算方法です。

使うのはborder-boxですね。border-boxは、borderまでの領域をwidth/heightとして計算するため特にボックスを%でサイズ指定する際などborder、paddingサイズを考慮しなくてよいので混乱せずに済みます。

ボックスモデル概念図 border-box適用時

あらかじめ全ての要素をbox-sizing: border-boxにしておくと作業中に混乱せずに済みますので部分的に指定するより、指定を統一することをお勧めします。

CSSの指定は、セレクタに*（アスタリスク）を使って全ての要素に対して適用させるとよいでしょう。

* { box-sizing: border-box; }