Spacing

Code

<!-- Padding: p, pt, pr, pb, pl, px, py -->
<div class="p-4 px-6 py-2">Padding all, x, y</div>

<!-- Margin: m, mt, mr, mb, ml, mx, my -->
<div class="mt-8 mx-auto mb-4">Centered horizontally</div>

<!-- Space between children -->
<div class="space-y-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<!-- Gap for flex/grid -->
<div class="flex gap-4">
  <div>X</div>
  <div>Y</div>
</div>

<!-- Width and height scales -->
<div class="w-full h-screen max-w-3xl">Full, screen, capped</div>

Explanation

Spacing utilities use a consistent scale where p-* sets padding, m-* sets margin, and gap-* sets flex/grid gaps. space-y-4 adds top margin between stacked children, while px/py target horizontal/vertical axes. The same numeric scale (0, 1, 2, 4, 8...) keeps rhythm uniform.

More Tailwind CSS Snippets