box-sizing: content-box - стандартное значение, где размеры (width, height) элемента относятся только к его содержимому. Отступы (padding) и границы (border) добавляются к этому размеру, увеличивая общие габариты элемента.
box-sizing: border-box включает отступы (padding) и границы (border) в заданные размеры (width, height). Таким образом, общие габариты элемента остаются равными заданным width и height, а размер содержимого уменьшается пропорционально padding и border.
| Свойство | box-sizing: content-box (по умолчанию) | box-sizing: border-box |
|---|---|---|
width/height | Размер содержимого | Размер элемента целиком (включая padding и border) |
| Общий размер элемента | width/height + padding + border | width/height |
Пример:
css