Что такое box-sizing в CSS

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

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

Пример:

.box {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 5px solid black;
  /* Фактическая ширина останется 100px (контент 50px + padding 40px + border 10px) */
}

Использование border-box упрощает расчеты размеров элементов, особенно при адаптивной верстке.