Чем отличается box-sizing от стандартного поведения контента?

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

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

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

Есть два значения свойства box-sizing, которые отличаются подходом к расчёту размеров элемента: developer.mozilla.org www.hackfrontend.com

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