Урок 04. Решения

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

⚡ Кратко

Решения трёх заданий с живым результатом.

Решение задания 1

Требование	Класс
padding 24px	`p-6`
padding 8px / 16px	`py-2 px-4`
margin-top 32px	`mt-8`
ширина 50%	`w-1/2`
квадрат 40×40	`size-10`

p-6 · mt-8 · w-1/2 · size-10

<div class="w-1/2 rounded-lg bg-emerald-50 p-6">
  <div class="size-10 rounded bg-emerald-500"></div>
  <p class="mt-8 rounded bg-white px-4 py-2 text-sm text-emerald-900">p-6 · mt-8 · w-1/2 · size-10</p>
</div>

Решение задания 2

Первый
Второй
Третий
Четвёртый

<ul class="flex flex-col gap-3">
  <li class="rounded-md bg-slate-100 px-4 py-2 text-sm text-slate-700">Первый</li>
  <li class="rounded-md bg-slate-100 px-4 py-2 text-sm text-slate-700">Второй</li>
  <li class="rounded-md bg-slate-100 px-4 py-2 text-sm text-slate-700">Третий</li>
  <li class="rounded-md bg-slate-100 px-4 py-2 text-sm text-slate-700">Четвёртый</li>
</ul>

Почему так: gap ставит промежуток между элементами и не добавляет ничего снаружи крайних. Псевдоклассы не нужны в принципе — это и есть выигрыш современного CSS.

Решение задания 3

Заголовок раздела

Контент ограничен по ширине и центрирован.

<div class="mx-auto max-w-3xl px-4 py-6 md:px-8">
  <h2 class="text-lg font-semibold text-slate-900">Заголовок раздела</h2>
  <p class="mt-1 text-sm text-slate-600">Контент ограничен по ширине и центрирован.</p>
</div>

Почему так: mx-auto центрирует блок, max-w-3xl держит ширину, px-4 md:px-8 даёт разные боковые поля, а py-6 — вертикальные. Ни одного медиазапроса в CSS писать не пришлось.