Урок 04. Примеры: отступы и размеры вживую

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

⚡ Кратко

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

1. Padding задаёт «воздух» внутри

p-1

p-3

p-6

<div class="space-y-2">
  <div class="rounded-md bg-sky-100 p-1 text-sm text-sky-900">p-1</div>
  <div class="rounded-md bg-sky-100 p-3 text-sm text-sky-900">p-3</div>
  <div class="rounded-md bg-sky-100 p-6 text-sm text-sky-900">p-6</div>
</div>

2. px и py — разные стороны

Кнопки почти всегда используют раздельные отступы: по горизонтали больше, по вертикали меньше.

<div class="flex flex-wrap items-center gap-3">
  <button class="rounded-md bg-slate-900 px-2 py-1 text-xs text-white">px-2 py-1</button>
  <button class="rounded-md bg-slate-900 px-3 py-2 text-sm text-white">px-3 py-2</button>
  <button class="rounded-md bg-slate-900 px-5 py-3 text-base text-white">px-5 py-3</button>
</div>

3. gap в сетке карточек

Карточка

<div class="grid grid-cols-3 gap-4">
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700">Карточка</div>
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700">Карточка</div>
  <div class="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700">Карточка</div>
</div>

Промежуток описан один раз у родителя. Не нужно ни margin-right у детей, ни отмены отступа у последнего.

4. Дробные ширины и авто-центрирование

w-full

w-1/2

w-1/3

w-1/4 mx-auto

<div class="space-y-2">
  <div class="w-full rounded bg-violet-200 p-2 text-center text-xs text-violet-900">w-full</div>
  <div class="w-1/2 rounded bg-violet-300 p-2 text-center text-xs text-violet-900">w-1/2</div>
  <div class="w-1/3 rounded bg-violet-400 p-2 text-center text-xs text-violet-950">w-1/3</div>
  <div class="mx-auto w-1/4 rounded bg-violet-500 p-2 text-center text-xs text-white">w-1/4 mx-auto</div>
</div>

5. Отрицательный отступ: аватар поверх обложки

Пётр Ильин

Дизайнер интерфейсов

<div class="max-w-xs overflow-hidden rounded-xl border border-slate-200 bg-white">
  <div class="h-16 bg-gradient-to-r from-sky-400 to-indigo-500"></div>
  <div class="px-4 pb-4">
    <div class="-mt-6 size-12 rounded-full border-4 border-white bg-slate-300"></div>
    <p class="mt-2 text-sm font-semibold text-slate-900">Пётр Ильин</p>
    <p class="text-xs text-slate-500">Дизайнер интерфейсов</p>
  </div>
</div>

Класс -mt-6 поднимает аватар на 24px вверх, а белая рамка border-4 border-white создаёт привычный «вырез» в обложке.

6. Отступы страницы, растущие с экраном

px-4 на мобильном, px-10 от 768px. Растяните окно — отступы изменятся.

<div class="rounded-lg bg-slate-100 px-4 py-6 md:px-10 md:py-10">
  <p class="text-sm text-slate-700">px-4 на мобильном, px-10 от 768px. Растяните окно — отступы изменятся.</p>
</div>