Spacing and Sizing

One spacing scale everywhere

Spacing utilities share one scale: p-4 (padding), px-6 (horizontal), mt-2 (margin-top), gap-4 (gap between flex or grid items), space-y-4 (vertical space between children). Sizing uses the same numbers (w-64, h-12) plus fractions (w-1/2), w-full, w-screen, min-h-dvh and max-w-prose. size-10 sets width and height together. Negative margins use a leading dash: -mt-2.

The design scale

A consistent scale for spacing, type and colour is what makes Tailwind designs look coherent.

A profile row

Spacing and sizing working together.

<div class="flex items-center gap-4 p-4 max-w-md">
  <img class="size-12 rounded-full" src="/avatar.jpg" alt="Asha">
  <div class="min-w-0">
    <p class="font-medium truncate">Asha Verma</p>
    <p class="text-sm text-gray-500">Frontend engineer</p>
  </div>
</div>

Prefer gap over margins between items

gap applies spacing between flex and grid children without extra rules for the first or last item.

Quick check: With the default spacing of 0.25rem, how much padding does p-4 give?

• 4px
• 1rem
• 4rem
• 0.4rem