В чем разница между box-sizing: content-box и box-sizing: border-box?

Разница между box-sizing: content-box и box-sizing: border-box заключается в том, как браузер рассчитывает размеры элемента при наличии рамок и полей. yoksel.github.io learn.javascript.ru

box-sizing: content-box (значение по умолчанию) добавляет отступы и рамки снаружи блока, увеличивая его размеры. yoksel.github.io habr.com Например, если задать ширину элемента 100 пикселей, то ширина контентной области будет 100 пикселей, а ширина любой границы или отступа будет добавлена к конечной ширине элемента, делая его шире 100 пикселей. developer.mozilla.org

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