cssのbox-sizing

ボックスを横並びに配置するときなど、余白・ボーダーのあるなしでレイアウトが崩れたいしていたので、ずいぶん計算をしました。
box-sizing: border-box;を設定すると、要素のpaddingとborderの値が幅に含まれるようになります。

全体に適用

*,
*:before,
*:after {
  box-sizing: border-box;
}