cssのbox-sizingを利用して、余白やborderを内側にしてレイアウトをしやすくする。

box-sizingを使用することで、要素のサイズ（width）を明確にすることができます。

box-sizingを使用しない場合

たとえばbox-sizingを使用しない場合で、40%と60%のbox要素にpadding 20pxをかけると

このようにはみ出てしまいます。これですとうまくレイアウトがとれません。
そんなときにbox-sizingを使用します。

box-sizingを使用した場合

box-sizingを使用すると、paddingやborderの横幅や高さを、40%の中に含んでくれます。ですのでイメージで言うと

このようになります。便利ですね。

CSS

*, *: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;
}