box-sizingを使用することで、要素のサイズ（width）を明確にすることができます。
box-sizingを使用しない場合
たとえばbox-sizingを使用しない場合で、40%と60%のbox要素にpadding 20pxをかけると
このようにはみ出てしまいます。これですとうまくレイアウトがとれません。
そんなときにbox-sizingを使用します。
box-sizingを使用した場合
box-sizingを使用すると、paddingやborderの横幅や高さを、40%の中に含んでくれます。ですのでイメージで言うと
このようになります。便利ですね。
CSS
|
1 2 3 4 5 6 7 |
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } |