4. Отступы и пространство

Tailwind CSS: Отступы и пространство

Spacing (пространство) — это основа любого UI. Правильные отступы делают интерфейс читаемым и элегантным. Tailwind даёт тебе полную систему spacing с консистентной шкалой.

Шкала spacing в Tailwind

Tailwind использует шкалу на основе 0.25rem (4px). Вот основные значения:

Класс	px	rem
0	0px	0
0.5	2px	0.125rem
1	4px	0.25rem
2	8px	0.5rem
3	12px	0.75rem
4	16px	1rem
5	20px	1.25rem
6	24px	1.5rem
8	32px	2rem
10	40px	2.5rem
12	48px	3rem
16	64px	4rem
20	80px	5rem
24	96px	6rem
32	128px	8rem

Padding (внутренние отступы)

<!-- Все стороны -->
<div class="p-4">padding: 16px</div>
<div class="p-8">padding: 32px</div>

<!-- Горизонтальные / вертикальные -->
<div class="px-6 py-3">left/right: 24px, top/bottom: 12px</div>

<!-- Отдельные стороны -->
<div class="pt-4">padding-top: 16px</div>
<div class="pb-2">padding-bottom: 8px</div>
<div class="pl-6">padding-left: 24px</div>
<div class="pr-6">padding-right: 24px</div>

Типичные паттерны:

<!-- Кнопка: горизонтальный padding больше вертикального -->
<button class="px-6 py-2">Кнопка</button>

<!-- Карточка: равномерный padding -->
<div class="p-6">Карточка</div>

<!-- Контейнер страницы -->
<div class="px-4 md:px-8 lg:px-16">Контент</div>

Margin (внешние отступы)

<!-- Все стороны -->
<div class="m-4">margin: 16px</div>

<!-- Горизонтальные / вертикальные -->
<div class="mx-4 my-8">...</div>

<!-- Авто-центрирование -->
<div class="mx-auto max-w-4xl">Центрированный блок</div>

<!-- Отдельные стороны -->
<div class="mt-8">margin-top: 32px</div>
<div class="mb-4">margin-bottom: 16px</div>
<div class="ml-2">margin-left: 8px</div>
<div class="mr-2">margin-right: 8px</div>

<!-- Отрицательные отступы (для перекрытий) -->
<div class="-mt-4">margin-top: -16px</div>

Gap (отступы в Flex и Grid)

gap — это расстояние между элементами (без внешних отступов у крайних элементов):

<!-- В flex-контейнере -->
<div class="flex gap-4">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

<!-- Разные отступы по осям -->
<div class="flex flex-wrap gap-x-6 gap-y-4">
  <!-- gap-x: горизонтальные, gap-y: вертикальные -->
</div>

<!-- В grid-контейнере -->
<div class="grid grid-cols-3 gap-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space Between (space-x, space-y)

Альтернатива gap — добавляет margin-left/top к каждому элементу кроме первого:

<!-- Горизонтальные отступы между элементами -->
<div class="flex space-x-4">
  <button>Кнопка 1</button>
  <button>Кнопка 2</button>
  <button>Кнопка 3</button>
</div>

<!-- Вертикальные отступы -->
<div class="space-y-6">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
</div>

Отличие gap vs space-x:

• gap — работает только с flex/grid, не создаёт отступ у крайних элементов
• space-x — работает с любыми flex-детьми, использует margin

Произвольные значения

Если нужно нестандартное значение — используй квадратные скобки:

<div class="p-[13px]">padding: 13px</div>
<div class="mt-[100px]">margin-top: 100px</div>
<div class="gap-[1.75rem]">gap: 1.75rem</div>

Практика