⚡ Кратко
Шпаргалка «ошибка → лечение»: 100vw → max-width:100%; нет box-sizing → border-box; height → min-height; «магия» → var(); !important → каскад; overflow:hidden → убрать причину.
Шпаргалка: ошибка → лечение
| Ошибка | Симптом | Как правильно |
|---|
width: 100vw | Горизонтальный скролл | max-width: 100% |
Нет box-sizing | Блок шире контейнера | *{ box-sizing: border-box } |
height: 200px | Обрезанный контент | min-height: 200px |
Двойной margin | Отступ «не сумма» (collapse) | display:flex; gap: 1rem |
margin-left: 137px | Ломается на другом экране | var(--gap) / относительные единицы |
color: red !important | Нельзя переопределить | Обычный каскад и специфичность |
overflow: hidden | Срезаны тени/подсказки | Убрать причину переполнения |
Чем проверять
| Инструмент | Зачем нужен |
|---|
| DevTools → Device Toolbar (Ctrl+Shift+M) | Проверить ширину 320px и горизонтальный скролл |
| DevTools → Layout / схема блочной модели | Увидеть, как padding/border влияют на размер |
Поиск по CSS: 100vw, !important, height: | Найти потенциальные грабли до релиза |
Три проверки закрывают большинство дефектов раскладки.