Какие основные отличия между box-sizing: content-box и border-box при работе с отступами?

Основные отличия между box-sizing: content-box и border-box при работе с отступами:

content-box (значение по умолчанию) ширина и высота элемента задаются только для содержимого, а отступы (padding) и границы (border) увеличивают общий размер элемента. developer.mozilla.org skillbox.ru Например, если указать ширину 100 пикселей, то ширина контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире 100 пикселей. developer.mozilla.org

border-box ширина и высота включают в себя и содержимое, и отступы, и границы, так что общий размер остаётся неизменным. skillbox.ru Например, если указать ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. developer.mozilla.org

Таким образом, при content-box размеры элемента могут увеличиваться с добавлением отступов и границ, а при border-box — оставаться постоянными, включая отступы и границы. www.hackfrontend.com