Почему CSS-блок получается шире заданного width — 28 сентября 2026 г. в 07:19:28.189
Почему CSS-блок получается шире заданного width Задаёте блоку width: 16rem, а он занимает 19,7rem. Причина в стандартной модели content-box: ширина относится только к содержимому, а внутренние отступы и рамки добавляются снаружи. При padding: 1.5rem и рамке 0,35rem расчёт такой: 16 + 3 + 0,7 = 19,7rem. С border-box те же отступы и рамки уже входят в заданные 16rem. Браузер уменьшает область содержимого, поэтому внешний размер блока остаётся предсказуемым. Внешний отступ margin в эту ширину не входит: он разделяет соседние элементы. В практическом сравнении двух моделей можно собрать одинаковые карточки, проверить схему размеров в инструментах разработчика и устранить горизонтальную прокрутку. Если полоса появилась у всей страницы, найдите элемент, вышедший за экран, и исправьте его ширину или перенос содержимого, а не скрывайте проблему через overflow-x: hidden.