Box-sizing позволяет менять способ расчёта размеров элемента, в отличие от стандартного поведения, когда ширина и высота, заданные элементу, применяются только для контента. 13

По умолчанию, если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. 3 Это может привести к тому, что элемент займёт больше места, чем ожидалось. 1

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

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

1. content-box. 35 Это значение по умолчанию, определённое в CSS стандарте. 3 Свойства width и height включают исключительно контент, и не включают padding и border. 35 Например, если выставить элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире 100 пикселей. 3
2. border-box. 35 Это значение говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые указываются в ширине и высоте элемента. 3 Например, если выставить элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. 3 Обычно это упрощает работу с размерами элементов. 3