Use the spacing scale

Spacing utilities share one scale.

<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 use related design tokens. A shared scale makes spacing more consistent than unrelated one-off values.

Read the prefix as a CSS decision:

• p-6 adds padding on every side inside the section
• mb-2 adds margin after the heading in a horizontal writing mode
• gap-4 adds space between Grid or Flex items without adding space outside the container

The number is a position in the spacing system, not a pixel count. Tailwind’s generated rule resolves through its theme, so the same step can be shared by padding, margin, gap, width, and other utilities.

Choose the owner of the space. A stack is usually clearer when the parent owns the repeated gap:

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

Adding mb-4 to every child leaves an unwanted margin after the last item and spreads layout responsibility across the children.

Use padding for space between a box’s content and its boundary. Use margin for a relationship outside one box. Use gap for spacing between children participating in a Flexbox or Grid layout. These are different box-model operations even when they look similar in one screenshot.

Avoid solving every alignment problem with larger spacing. Unexpected space can come from browser heading margins, line height, Grid tracks, or margin collapse. Inspect the box model before changing a class.

Your action is to build the same three-item stack once with child margins and once with parent gap. Add and remove an item, inspect the outer edges, and explain which element owns every space.