Почему существует несколько видов CSS box model

Существует два основных вида CSS box model: content-box (стандартный) и border-box. Разница в том, как рассчитывается ширина элемента.

В content-box (по умолчанию) width и height определяют размеры только контента, а padding и border добавляются к ним, увеличивая общий размер элемента.

В border-box width и height включают padding и border, что упрощает расчеты.

Пример:

.box-content {
  box-sizing: content-box; /* width = 200px + 20px (padding) + 2px (border) = 222px */
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

.box-border {
  box-sizing: border-box; /* width = 200px (включая padding и border) */
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

border-box удобнее для верстки, поэтому часто применяют глобальный сброс:

* { box-sizing: border-box; }