Как свойство box-sizing влияет на размер элемента?

Ответ от нейросети

sobes.tech AI

Свойство box-sizing определяет, как ширина и высота элемента вычисляются: включая или исключая отступы (padding) и границы (border).

Существует два основных значения:

content-box (значение по умолчанию): Ширина и высота элемента включают только содержимое (content). Padding и border добавляются сверх указанных ширины и высоты.
border-box: Ширина и высота элемента включают содержимое (content), padding и border. Указанные ширина и высота — это общие размеры элемента.

Пример:

.example {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid black;
}

`box-sizing`	Итоговая ширина	Итоговая высота
`content-box`	100 (content) + 2 * 10 (padding) + 2 * 5 (border) = 130px	50 (content) + 2 * 10 (padding) + 2 * 5 (border) = 80px
`border-box`	100px (включает content, padding, border)	50px (включает content, padding, border)

Использование border-box упрощает расчеты размеров в сложных макетах, так как padding и border не "раздувают" элемент за пределы указанной ширины/высоты.