Spacing and Sizing

Introduction

Almost every layout depends on space: space inside elements (padding), between elements (margin and gap) and the size of elements themselves. Tailwind gives you one spacing scale for all of them, which keeps your designs consistent.

The spacing scale

Spacing utilities use a number. The number multiplies the base spacing, which is 0.25rem by default (I checked: --spacing: 0.25rem in the generated CSS).

So p-4 means padding of 1rem. Because the scale is a multiplier, any number works, such as p-5 or p-7.

Padding and margin

<button class="rounded-lg bg-blue-600 px-4 py-2 text-white">
  Save
</button>

mx-auto on a block element with a set width centres it horizontally. A leading minus sign makes a negative margin. I compiled -mt-4 and it generated a negative margin from the same scale.

Gap

gap creates space between children of a flex or grid container. It is usually better than adding margins to every child.

<div class="flex gap-4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

gap-x-4 and gap-y-2 set horizontal and vertical gaps separately.

Width and height

size-10 is a shortcut for squares such as avatars and icons. It replaces w-10 h-10.

Maximum widths and readability

Long lines of text are hard to read. max-w-prose limits width to a comfortable reading measure, and sizes such as max-w-md, max-w-2xl and max-w-7xl come from the theme. A common page container is:

<main class="mx-auto max-w-7xl px-4">
  ...
</main>

The container class also exists. It sets width: 100% and a different max-width at each breakpoint, but most designs use mx-auto max-w-7xl px-4 because it is easier to control.

Space between children

space-x-4 and space-y-4 add space between children, and divide-y adds lines between them. They work, but gap on a flex or grid parent is simpler and handles wrapping better.

Common mistakes

• Using margin for the space between flex children instead of gap.
• Forgetting that padding adds to the element's size unless Tailwind's border-box sizing is in effect. Preflight sets box-sizing: border-box on everything, so padding is included in w-* widths.
• Using fixed pixel widths that break on small screens. Prefer fractions, max-w-* and responsive classes (covered later).

Try it yourself

Build a card: mx-auto max-w-sm rounded-xl bg-white p-6 shadow-sm. Inside, stack a title and paragraph with mt-2 between them, and a button with mt-4 px-4 py-2. Then change the spacing numbers and see how the layout changes.

Summary

• One spacing scale drives padding, margin, gap, width and height, and each step is 0.25rem by default.
• Use p, m, gap, w, h and size utilities with number steps, fractions and keywords like full and screen.
• Prefer gap over margins between flex and grid children, and max-w-* with mx-auto for readable page widths.