Отступы: padding, margin и space

Главные рабочие лошадки вёрстки — отступы p-*, m-* и расстояния между элементами.

В Tailwind отступы задаются по шкале интервалов: число в классе — это шаг, где 4 равно 1rem (16px).

Padding — внутренний отступ

Буква p — это padding. Дальше уточняем сторону и величину:

• p-4 — отступ со всех сторон (16px);
• px-4 — слева и справа (ось X), py-2 — сверху и снизу (ось Y);
• pt-2, pr-3, pb-2, pl-3 — top/right/bottom/left по отдельности.

<button class="px-4 py-2">Кнопка</button>

У кнопки появятся горизонтальные отступы по 16px и вертикальные по 8px — текст перестанет «прилипать» к краям.

Шкала интервалов

Числа — это не пиксели, а шаги шкалы (шаг = 0.25rem = 4px):

Единая шкала — это и есть дизайн-система: отступы по всему сайту кратны одному шагу, поэтому вёрстка выглядит согласованно.

Margin — внешний отступ

Те же правила, но буква m: m-4, mx-auto, mt-8. Особенно полезен mx-auto — он центрирует блок с заданной шириной по горизонтали:

<div class="w-80 mx-auto">Я по центру</div>

Блок шириной 320px встанет ровно посередине родителя. Margin поддерживает и отрицательные значения: -mt-4 сдвинет элемент на 16px вверх, налезая на соседа.

Space — отступы между детьми

Часто нужно одинаковое расстояние между элементами списка, но не до краёв. Для этого есть space-x-* и space-y-* — они добавляют отступ между соседними детьми контейнера:

<div class="space-y-4">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
</div>

Между абзацами появится вертикальный зазор по 16px, а сверху первого и снизу последнего — ничего лишнего. Это удобнее, чем вешать mb-4 на каждый элемент и потом убирать у последнего.

Итог

• p-* — внутренний отступ, m-* — внешний; оси x/y и отдельные стороны t/r/b/l.
• Числа — шаги общей шкалы (4 = 16px), а не пиксели.
• mx-auto центрирует блок; space-y-* задаёт зазоры между детьми.