box-sizingとは

box-sizingとは

widthやheight等で決めた領域に対して、paddingとborderを含めるかどうかを決めるプロパティです。

box-sizingの値は2種類

content-box
領域に対してpaddingとborderの値を含めないので、
全体の大きさは 領域＋（padding,border）となります。

border-box
領域に対してpaddingとborderの値を含めるので、
全体の大きさは 領域の大きさだけとなります。

解説

See the Pen
MWwoXWL by Gokan Soichiro (@sow_g)
on CodePen.

こちらのデモでは横300px・縦100pxのdivが2つあります。
そこにそれぞれ10pxのborderと20pxのpaddingを設定しています。

上のcontent-boxを設定したdivは、全体のサイズにborder/paddingが含まれないので、
横幅は[width: 300px]+[padding: 20px]+[boder: 10px]の360pxになっています。

対して下のborder-boxを設定したdivは、全体のサイズにborder/paddingを含むので、
width/heightで設定したサイズになっています。

box-sizingの使い所

使い所はflex-boxやレスポンシブデザインです。
特にコーディングを始めたばかりの方は、メニュー等の横並びのレイアウトが崩れてしまう事があると思います。
そのような時は、全体の横幅よりも内包する要素が大きくなってしまっているからなのですが、
paddingやborderを変更しても要素や全体のサイズが変わらないのでとても便利です。

レスポンシブデザインでコーディングする際も、パソコン表示とスマホ表示でborderやpaddingの値を変更しても
要素の大きさを気にせずレイアウト出来るのでとても便利なプロパティです。

おすすめの使い方

僕はCSSの先頭に下記のように記述しています。

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

特定のセレクタでもいいのですが、アスタリスク(星マーク)で設定しておけば、全ての要素に適用出来るのでとりあえず入れています。
最初にも言った通り、他の方がコーディングしていたりするとbox-sizingを採用していない場合があるので、
むやみに全体に適用してしまうとレイアウトが崩れてしまう恐れがあるので気をつけましょう。