box-sizingで横幅や高さに、ボーダーやパディングを含める

これによって width や height を気にせずに、
border や padding を使えるので計算が楽になりますね。

See the Pen box-sizingのサンプル by takapen (@takapen) on CodePen.

  aaa



  bbb

div {
  width: 200px;
  height: 60px;
  background: #ccc;
}
.aaa {
  border: 10px solid #111;
  box-sizing: content-box;/* 初期値 */
}
.bbb {
  border: 10px solid #111;
  box-sizing: border-box;
}