Spacing: Margin, Padding and Sizing

Consistent spacing is what separates polished interfaces from amateur ones. Tailwind CSS solves this with a single numeric spacing scale that powers margin, padding, width, height, and gap utilities. Master this scale and you can build well-balanced layouts without ever writing a pixel value.

The Spacing Scale

Tailwind spacing units are multiples of 0.25rem (4px by default). So 4 means 1rem (16px), 8 means 2rem (32px), and so on:

| Class suffix | CSS value | Pixels | |---|---|---| | 1 | 0.25rem | 4px | | 2 | 0.5rem | 8px | | 4 | 1rem | 16px | | 6 | 1.5rem | 24px | | 8 | 2rem | 32px | | 12 | 3rem | 48px |

Padding

Padding adds space inside an element:

p-4 — all four sides
px-4 — left and right
py-2 — top and bottom
pt-4, pr-4, pb-4, pl-4 — individual sides

html

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

The px-6 py-2 combination is the classic button recipe: more horizontal than vertical padding.

Margin

Margin adds space outside an element and uses the same pattern with m: m-4, mx-auto, mt-8, mb-2. Two special values matter:

mx-auto centers a block element horizontally.
Negative margins like -mt-4 pull elements upward, handy for overlapping designs.

html

<div class="mx-auto max-w-md">
  <h1 class="mb-2 text-2xl font-bold">Centered column</h1>
  <p class="mt-0 text-gray-600">With margin below the heading.</p>
</div>

Space Between Children

Instead of adding margin to every child, put space-y-4 or space-x-4 on the parent:

html

<ul class="space-y-2">
  <li class="rounded bg-gray-100 p-3">Item one</li>
  <li class="rounded bg-gray-100 p-3">Item two</li>
  <li class="rounded bg-gray-100 p-3">Item three</li>
</ul>

Each item automatically gets vertical breathing room. In flex and grid layouts, prefer the gap-4 utility, which we will use heavily in the next lessons.

Width and Height

Sizing utilities reuse the same scale plus fractions and keywords:

Fixed: w-16 (4rem), h-8 (2rem), size-10 (width and height together)
Fractions: w-1/2, w-1/3, w-2/3 for percentage widths
Full and screen: w-full, h-full, h-screen, min-h-screen
Content-based: w-fit, w-max, w-min

html

<div class="h-screen w-full bg-slate-800">
  <div class="h-16 w-1/2 bg-sky-400"></div>
</div>

Max-Width for Readable Layouts

max-w-* utilities cap how wide content can grow. The most common page-layout pattern in all of Tailwind is:

html

<div class="mx-auto max-w-4xl px-4">
  <!-- page content -->
</div>

This centers the content, limits it to a comfortable reading width, and keeps padding on small screens. Named sizes run from max-w-xs up through max-w-7xl.

Arbitrary Values

When the scale does not have what you need, square brackets accept any value: w-[137px], mt-[7vh], p-[3.2rem]. Use these sparingly; sticking to the scale is what keeps designs consistent.

Key Takeaways

One spacing scale (multiples of 4px) drives margin, padding, sizing, and gap.
p is inside space, m is outside space; add x, y, t, r, b, l for sides.
mx-auto plus max-w-* is the standard centered-page pattern.
Use space-y-* or gap-* on parents instead of margins on every child.

Next up: Typography and Fonts, where you will control size, weight, and line height like a designer.