Box sizing css что это?

Думал, что margin тоже входит в border-box, теперь понял.

Вот откуда взялись лишние сорок четыре пикселя.

Что меняется Box-sizing задает способ интерпретации размеров. Значение content-box относится к области содержимого: внешние отступы внутри рамки и сама рамка прибавляются к width. При border-box заданный размер включает содержимое, padding и border.

Расчет Возьмем обычный блок без особой раскладки: width равна 200px, padding с каждой стороны 20px, рамка с каждой стороны 2px. При content-box ширина от внешнего края одной рамки до другой составит 244px. При border-box она составит 200px, а доступная ширина содержимого уменьшится до 156px.

Внешние отступы Margin находится снаружи рамки и в эти размеры не входит. Поэтому два блока по 200px с большими внешними отступами не обязаны помещаться в контейнер 400px даже после включения border-box.

Общее правило Часто используют *, *::before, *::after { box-sizing: border-box; }. Псевдоэлементы указаны отдельно, поскольку тоже могут создавать собственные коробки с размерами и границами. Это соглашение проекта, а не требование для любого сайта.

Что не исправится Длинное неразрывное слово, минимальная ширина flex-элемента, фиксированный размер потомка или неправильно рассчитанный gap могут продолжать вызывать переполнение. Border-box меняет модель размера, но не устраняет все причины горизонтальной прокрутки.

Как проверить Откройте схему коробки в DevTools и сравните content, padding и border. Для точного эксперимента начните с простого блочного элемента вне сложной сетки. Затем добавляйте ограничения по одному, чтобы видеть, какое именно свойство изменило итог.

1. Найдите width, padding и border блока.
2. При content-box прибавьте боковые padding и border к ширине содержимого.
3. При border-box включите их внутрь заданной width.
4. Margin считайте отдельно.
5. Проверьте фактическую коробку в DevTools. Если размер все еще неожиданный, посмотрите ограничения и модель раскладки родителя.