Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элементас разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг:

<div class="one">padding: 0</div>
<div class="two">padding: 40px</div>

.one {
  width: 200px;
  height: 100px;
  padding: 0;
}
.two {
  width: 200px;
  height: 100px;
  padding: 40px;
}

.one,.two{
  background: teal;
  color: white;
  margin: 20px auto;
}
.two{
  box-shadow: inset 0 0 0 40px darkcyan;
}

Для визуализации, padding был окрашен с помощью свойства box-shadow. В действительности же, задать цвет для padding невозможно!

На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing. Добавим в наши блоки всего по одной строчке кода:

.one {
  width: 200px;
  height: 100px;
  padding: 0;
  box-sizing: border-box;
}
.two {
  width: 200px;
  height: 100px;
  padding: 40px;
  box-sizing: border-box;
}

Так стало гораздо проще работать с CSS, поэтому многие добавляютbox-sizing: border-box всем элементам на сайте при помощи этого кода:

* {
  box-sizing: border-box;
}

Это стало хорошей и распространённой практикой, однако по умолчанию значением свойстваbox-sizing является стандартная модель content-box, возвращающий нас в те времена, когда приходилось вычислять ширину элемента по его полям.