Изменение алгоритма расчёта размеров боксов в боксовой модели CSS со стандартного content-box на border-box во многом облегчает процесс вёрстки макетов. Для изменения свойства box-sizing для всех элементов HTML документа можно использовать следующий фрагмент CSS кода.

html {
  box-sizing: border-box;
}

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

Для лучшего понимания разницы между content-box и border-box следует подробнее ознакомиться с боксовой моделью. Для этого можно прочитать её описание здесь.