Урок 46. Решения: Типичные ошибки вёрстки

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#width #height #margin-left #color #overflow

⚡ Кратко

Решения трёх задач: 100vw → max-width:100%, добавить box-sizing: border-box, заменить height на min-height. Каждое — с живым результатом.

Задание 1 — горизонтальный скролл

Меняем 100vw на ширину контейнера. Ширина скроллбара больше не выталкивает блок наружу.

.hero — вписан по контейнеру, скролла нет
/* было: .hero { width: 100vw; } */
.hero { max-width: 100%; }

Задание 2 — блок не вылезает

Не трогая width и padding, добавляем box-sizing: border-box — padding и border теперь входят в ширину.

*, *::before, *::after { box-sizing: border-box; }
.field { width: 100%; padding: 16px; border: 2px solid; }

Задание 3 — текст не обрезается

Меняем фиксированную height на min-height: карточка держит минимум, но растёт под текст.

Длинное описание карточки теперь видно целиком, потому что блок растёт под содержимое.
/* было: .card { height: 60px; overflow: hidden; } */
.card { min-height: 60px; }

Задание 4 — пример чеклиста

  • Нет горизонтального скролла на 320px (нет 100vw).
  • box-sizing: border-box задан глобально.
  • Высоты — через min-height, а не height.
  • В CSS нет !important и «магических» пикселей.
  • Кликабельные элементы — семантические (button/a).
Любой «фикс» должен сохранять смысл разметки и работать на разных ширинах, а не просто убирать симптом на одном экране.

Навигация