Spacing: padding, margin, and gap

Tailwind's spacing utilities use a consistent scale for padding (p-*), margin (m-*), and layout gaps (gap-*). Directional forms include px-* for left/right padding, py-* for top/bottom, mt-* for top margin, and space-y-* for spacing between direct children in simple vertical stacks.

Prefer gap-* for grid and flex layouts because it expresses the relationship between items without adding margins to individual children. Use margin when an element needs external separation from surrounding content.

A useful spacing rhythm is more important than choosing the mathematically perfect number. Reusing a small set of spacing values makes an interface feel intentional.

Spacing utility families

Padding: p-4, px-6, py-2

Space inside an element.

Margin: mt-4, mx-auto

Space outside an element; mx-auto commonly centers a constrained block.

Gap: gap-3, gap-x-6

Space between grid/flex items.

Child spacing: space-y-4

Adds spacing between direct children in a stack.

Spacing patterns

<section class="rounded-2xl border border-slate-200 bg-white p-6">
  <div class="flex items-start gap-4">
    <div class="grid size-12 shrink-0 place-items-center rounded-xl bg-blue-100 font-bold text-blue-700">TF</div>
    <div class="min-w-0">
      <h2 class="font-semibold">Weekly review</h2>
      <p class="mt-1 text-sm leading-6 text-slate-600">Review completed work and choose next week's priorities.</p>
    </div>
  </div>
  <div class="mt-6 flex flex-wrap gap-2">
    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs">Planning</span>
    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs">Team</span>
  </div>
</section>

💡 p-6 pads the card. gap-4 separates the icon from the text. mt-1 creates a small heading-to-description gap, while mt-6 separates the metadata row from the main content. min-w-0 allows flex children to shrink rather than overflow because of long text.

Knowledge Check

For consistent spacing between items in a flex row, which utility is usually the clearest choice?

Spacing: padding, margin, and gap

STAY UPDATED WITH BYTES!