Как box-sizing: border-box меняет расчёт размеров элемента?

Question

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

YeaHub · Accepted Answer

Сравнение:/* content-box (по умолчанию) */
.div1 {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Фактическая ширина: 200 + 40 + 10 = 250px */
}

/* border-box */
.div2 {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Фактическая ширина: 200px (включая padding и border) */
}Зачем использовать border-box?Предсказуемость: заданная width — это итоговая ширина.Упрощение адаптивной верстки.Вывод:border-box — стандарт в современной верстке. Подключают глобально:* { box-sizing: border-box; }