Spacing: Padding and Margin

The Spacing Scale

Tailwind's default spacing scale is based on multiples of 0.25 rem (4 px). p-1 = 0.25 rem, p-4 = 1 rem, p-8 = 2 rem, p-16 = 4 rem. The same scale applies to margin, gap, width, height, and more.

Padding Utilities

• p-{n} — padding on all sides.
• px-{n} — horizontal padding (left + right).
• py-{n} — vertical padding (top + bottom).
• pt-{n}, pr-{n}, pb-{n}, pl-{n} — individual sides.
• ps-{n}, pe-{n} — logical properties (start/end, RTL-aware).

Margin Utilities

• m-{n} — margin on all sides.
• mx-auto — center an element horizontally.
• mt-{n}, mr-{n}, mb-{n}, ml-{n} — individual sides.
• -mt-{n} — negative margin (pulls element upward).
• space-x-{n}, space-y-{n} — add space between children.

<div class="mx-auto max-w-2xl px-6 py-12">
  <p class="mb-4">First paragraph with bottom margin.</p>
  <p class="mb-4">Second paragraph.</p>
</div>