Content, padding, border и margin: считаем размеры карточки и исправляем переполнение без случайных отступов.
Размер в коде и место на странице
Представь карточку товара с шириной 300 пикселей, внутренними отступами по 24 пикселя и рамкой толщиной 2 пикселя. При стандартной модели content-box число 300 задаёт ширину содержимого. Рамка и внутренние отступы добавляются снаружи: 300 + 48 + 4 = 352 пикселя.
Если родитель рассчитан ровно на 300, карточка выйдет за его край. Это не ошибка округления. В расчёте смешали размер текста внутри и внешний размер рамки.
Четыре области одного элемента
Content — область содержимого. Padding — пространство между содержимым и границей. Border — сама граница. Margin — внешний отступ от соседей. Фон элемента обычно виден в области padding, а margin остаётся снаружи.
Представь фотографию в рамке: снимок — содержимое, белое паспарту — padding, деревянная окантовка — border, расстояние до соседней рамки — margin. Аналогия помогает различить роли, но реальные размеры всё равно нужно смотреть в браузере.
Как меняется расчёт с border-box
При box-sizing: border-box объявленная ширина включает содержимое, padding и border. В нашей карточке внешняя ширина останется 300, а содержимому достанется 248 пикселей: 300 − 48 − 4. Margin по-прежнему не входит в эти 300.
Поэтому две карточки с одинаковой width могут выглядеть совершенно по-разному, если у них различается box-sizing. Уменьшать шрифт в ответ на неожиданное переполнение — значит исправлять следствие, не проверив расчёт.
.card {
box-sizing: border-box;
width: 300px;
padding: 24px;
border: 2px solid #002fa7;
}Почему всё равно может появиться прокрутка
border-box не решает все проблемы макета. Длинная строка без переносов, фиксированная ширина картинки или минимальный размер элемента в сетке тоже могут растянуть страницу. Сначала определи, какой именно элемент шире доступной области.
Например, карточка шириной 300 пикселей с внешними отступами по 20 требует 340 пикселей по горизонтали. Если экран узкий, можно убрать фиксированную ширину и дать карточке занять ширину родителя. Но если причина в одной длинной ссылке, менять размеры всей сетки не обязательно.
Проверка через инструменты разработчика
В инспекторе браузера выбери карточку и найди схему box model. Сравни каждую область с заданными стилями. Затем временно выключи padding, border и margin по очереди: так видно, что именно добавляло место.
Для упражнения сделай две одинаковые карточки и различай только box-sizing. При ширине 300, padding 24 и border 2 их рамки будут иметь ширину 352 и 300 пикселей. Подпиши эти значения рядом: получится наглядный пример, который проще понять, чем список CSS-свойств.