box-sizing определяет, как вычисляется общий размер элемента (ширина и высота), включая его padding и border.
Существует два основных значения:
content-box (значение по умолчанию): Ширина и высота элемента определяются только размерами контента. Padding и border добавляются к этому размеру, увеличивая общий размер элемента.border-box: Ширина и высота элемента включают в себя padding и border. Размер контента уменьшается для их размещения.Проиллюстрируем на примере:
cssЕсли box-sizing: content-box;:
Общая ширина будет 100px (контент) + 10px (padding слева) + 10px (padding справа) + 5px (border слева) + 5px (border справа) = 130px.
Общая высота будет 50px (контент) + 10px (padding сверху) + 10px (padding снизу) + 5px (border сверху) + 5px (border снизу) = 80px.
Таблица для наглядности:
| Свойство | box-sizing: content-box; | box-sizing: border-box; |
|---|---|---|
| Ширина элемента | width + padding + border | width (включает content, padding, border) |
| Высота элемента | height + padding + border | height (включает content, padding, border) |
| Размер блока контента | width, height | width - (padding + border), height - (padding + border) |
border-box часто считается более интуитивным для расчета размеров, особенно в адаптивном дизайне, так как установленные width и height сохраняются независимо от добавленного padding и border.