Padding & Margin

Apply consistent padding and margin from the spacing scale, including axis, side, negative, and auto values.

4 min read Level 1/5 #tailwind#layout#spacing

What you'll learn

Use padding utilities by side and axis
Use margin with auto and negative values
Use space utilities for gaps between children

Spacing is where the shared scale earns its keep. Every padding and margin value comes from one system, so layouts stay in rhythm by default.

Padding by Side and Axis

<div class="p-4">all sides 1rem</div>
<div class="px-6 py-2">1.5rem horizontal, 0.5rem vertical</div>
<div class="pt-8 pb-2">different top and bottom</div>

p is all sides, px/py are the horizontal/vertical axes, and pt/pr/pb/pl are single sides. Margin uses the same shape with m.

Auto and Negative Margins

<!-- Classic horizontal centering -->
<div class="max-w-md mx-auto">centered block</div>

<!-- Pull an element outward, e.g. a full-bleed image inside padding -->
<img class="-mx-6" src="/banner.jpg" alt="" />

mx-auto is the idiomatic center-a-block trick. Negative margins (-mt-4, -mx-6) intentionally pull an element past its container — handy for overlap effects and full-bleed media.

Spacing Between Children

When you want consistent gaps between stacked children without touching each one, use space-y or space-x:

<div class="space-y-4">
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

space-y-4 adds margin between siblings only, not above the first or below the last. Inside a flex or grid container, prefer gap-* instead — it is cleaner and handles wrapping correctly.

A v4 note: the spacing scale is now dynamic. Beyond named steps, any multiple of the base unit works, and arbitrary values like p-[7px] are fine for genuine one-offs.

Width & Height →