Урок 04. Отступы и размеры

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~50 мин 🎯 Сложность: Начальная

⚡ Кратко

Вся шкала отступов и размеров построена на одном шаге: --spacing: 0.25rem. Число в классе — множитель: p-4 = 4 × 0.25rem = 1rem = 16px. Те же числа работают в m-*, gap-*, w-*, h-*, size-*, inset-*.

  • Внутри — p-*, снаружи — m-*, между детьми — gap-*.
  • size-10 задаёт ширину и высоту одним классом.
  • Ширину блока текста ограничивают max-w-*, а не width.

О чём этот урок

Отступы и размеры — половина вёрстки. Здесь разбираем шкалу, все семейства классов (включая логические ps-*/pe-*), выбор между gap и space-*, дробные ширины, экранные единицы и произвольные значения. К концу урока вы сможете собрать карточку и сетку, не подглядывая в документацию.

Структура урока

Теория

Шкала, семейства классов, gap против space.

Справочник

Таблицы значений и всех приставок.

Примеры

Отступы, промежутки, размеры и ограничение ширины вживую.

Старый vs Новый

CSS-отступы против утилит, изменения v3 → v4.

Задания

Собрать карточку и разложить сетку.

Решения

Разбор с готовым результатом.

Ошибки

Смешение gap и space, фиксированные ширины, отступы у inline.

Домашнее задание

Секция с сеткой карточек.

Ресурсы

Документация по padding, margin, width.

Практика

  • Переведите в классы: padding 24px, margin-top 8px, ширина 50%.
  • Постройте список из трёх блоков с промежутком 12px двумя способами.
  • Ограничьте абзац по ширине так, чтобы строка была не длиннее 65 знаков.

Навигация