Как Box Model работает в браузере

Box Model определяет, как элементы отображаются и занимают место на странице. Он состоит из 4 частей: content (содержимое), padding (внутренний отступ), border (рамка) и margin (внешний отступ).

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

Пример:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

В content-box общая ширина = 200 + 202 + 52 = 250px. В border-box (если задан) ширина останется 200px, включая padding и border.

Margin не входит в расчет ширины, но влияет на позиционирование элемента относительно других.