Как работает свойство box-sizing в CSS?

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

Свойство box-sizing может изменять это поведение: developer.mozilla.org

• Content-box — значение по умолчанию. doka.guide developer.mozilla.org Если выставить элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире 100 пикселей. developer.mozilla.org
• Border-box — говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые указываются в ширине и высоте элемента. developer.mozilla.org Если выставить элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. developer.mozilla.org

При любом значении свойства внешние отступы (margin) в расчёт не берутся. doka.guide