Use the spacing scale

All spacing utilities in Tailwind share one scale. Padding, margin, gap, width, height: they all read from the same list of values.

Here’s a section using three of them:

<section class="p-6">
  <h2 class="mb-2">Latest articles</h2>
  <div class="grid gap-4">...</div>
</section>

p-6, mb-2, and gap-4 come from the same system. That’s why a page built with Tailwind tends to look consistent even when several people work on it. Everyone picks from the same steps.

Read the prefix as a CSS decision

• p-6 adds padding on every side inside the section
• mb-2 adds margin below the heading
• gap-4 adds space between the grid items, without adding any space outside the grid

The number is a step on the scale, not a pixel count. In v4, the scale is built on one variable, --spacing, which defaults to 0.25rem. So p-6 is calc(var(--spacing) * 6), which is 1.5rem, or 24 pixels at the default font size. Change --spacing in your theme and every spacing utility follows.

Who owns the space

This is the question I ask myself the most. Take a vertical stack of items. You can put mb-4 on every child, or gap-4 on the parent:

<ul class="grid gap-4">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

The parent version is cleaner. With child margins, the last item carries an unwanted margin at the bottom, and the layout rule is spread across every child. With gap, one class on the parent controls everything, and adding or removing an item just works.

Padding, margin, and gap are not interchangeable

Use padding for space between a box’s content and its edge. Use margin for the relationship between a box and what’s outside it. Use gap for space between children in a Flexbox or Grid container. They can look identical in a screenshot, but they’re different box-model operations, and they behave differently when content changes.

One more thing. Don’t fix every alignment issue by adding more spacing. Unexpected space often comes from default heading margins, line height, or margin collapse. Inspect the box model in DevTools before reaching for a bigger number.

Try this: build the same three-item stack twice, once with mb-4 on each child and once with gap-4 on the parent. Add a fourth item, remove one, inspect the outer edges, and say which element owns each space.