В чем разница между border-box и content-box при использовании свойства box-sizing?

Разница между border-box и content-box при использовании свойства box-sizing в CSS заключается в том, как рассчитываются размеры элемента. www.hackfrontend.com developer.mozilla.org

Content-box — стандартное поведение свойства box-sizing, при котором ширина и высота элемента включают исключительно содержимое. www.hackfrontend.com developer.mozilla.org Это означает, что padding и граница (border) не включаются в размеры, и они добавляются отдельно. www.hackfrontend.com Например, если указать ширину элемента 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире 100 пикселей. developer.mozilla.org

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

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