Как работает свойство Box-sizing

Свойство box-sizing определяет, как рассчитываются ширина и высота элемента. Оно может принимать два значения:

1. content-box (по умолчанию) - ширина/высота включают только контент, padding и border добавляются к ним.
2. border-box - ширина/высота включают контент, padding и border, что упрощает расчеты.

Пример:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Фактическая ширина останется 200px */
}

Основное преимущество border-box - предсказуемость размеров элементов при наличии padding и border. Это особенно полезно при создании адаптивных макетов.