Главная идея
Сломанная вёрстка редко выглядит как одна ошибочная строка. Чаще это накопление мелких неверных решений: задали ширину в vw, забыли про box-sizing, зафиксировали высоту «на глаз», подавили чужой стиль через !important. По отдельности каждое решение кажется безобидным, а вместе они дают горизонтальный скролл, обрезанный текст и макет, который «разваливается» при первом же изменении контента. Хорошая новость: набор таких ошибок конечен и узнаваем. Если знать их в лицо, большинство багов раскладки чинятся за минуту.
Типичные ошибки вёрстки — это грабли в траве, по которым ходят все новички.
Опытный верстальщик не умнее — он просто помнит, где они лежат, и обходит их не глядя.
Этот урок — карта тех самых граблей: 100vw, забытый box-sizing,
фиксированная высота, !important, спрятанный overflow. Запомнил карту — перестал наступать.
Симптом → Причина → Лечение
Удобно держать в голове одну схему: видимый симптом почти всегда указывает на конкретную причину, а у причины есть стандартное лечение.
Как это работает: пять главных граблей
1. 100vw и горизонтальный скролл. Единица vw считается от ширины viewport вместе с вертикальным скроллбаром. Когда страница длинная, скроллбар «съедает» ~15px, и блок шириной 100vw оказывается шире видимой области — появляется ненужная горизонтальная прокрутка. Лечение: для полноширинных блоков используйте width: 100% или max-width: 100% (см. урок 31 про viewport-единицы).
2. Забытый box-sizing: border-box. По умолчанию (content-box) width задаёт только содержимое, а padding и border прибавляются сверху. Блок width: 100%; padding: 1rem внутри контейнера станет шире контейнера и вылезет. Лечение — глобально *{ box-sizing: border-box } (подробно в уроках 15 и 17 про блочную модель).
3. Фиксированная высота вместо min-height. height: 200px жёстко режет блок: при длинном тексте контент либо обрезается, либо вылезает за рамку. Высоту контента почти всегда диктует сам контент — задавайте min-height, и блок будет расти при необходимости.
4. Схлопывание вертикальных margin. Соседние блочные элементы не складывают верхний и нижний margin — остаётся больший из двух. Из-за этого отступ между блоками часто «не такой, как сумма». Это не баг, а спецификация; чтобы margin не схлопывались, используйте отступы через gap во flex/grid.
5. Магические числа и !important. Значения вроде margin-left: 137px подогнаны под конкретный экран и ломаются на других. А !important — это попытка «перекричать» каскад: первый !important рождает второй, и начинается война специфичности. Лечение — переменные (var(--gap)), относительные единицы и аккуратная архитектура селекторов (урок 45, БЭМ).
Когда применять
Прогоняйте этот чеклист перед тем, как сдать макет: откройте страницу на ширине 320px и проверьте, нет ли горизонтального скролла; вставьте в блоки заведомо длинный текст и убедитесь, что ничего не обрезается; найдите в CSS поиском !important, 100vw и «круглые» пиксельные значения. Пять минут проверки экономят часы отладки «почему у клиента поехало».
box-sizing — уроки 15 и 17; позиционирование и z-index — уроки 18 и 19; viewport-единицы (vw/vh) — урок 31; именование и специфичность — урок 45 (БЭМ).100vw может не быть). Поведение margin collapse имеет исключения (flex/grid/overflow создают новый контекст). Сверяйтесь с MDN.