Chapter 17: Spacing

Core Idea

margin and padding utilities share one value grammar across eleven directional variants each (all sides, both axes, both logical-and-physical per-side forms), all driven by the single --spacing theme multiplier — plus a "space between children" pattern (space-x-*/space-y-*) for adding gaps to a row/column of elements without touching gap or per-child margins.

Reference Tables

Direction prefixes (same set for m-* margin and p-* padding):

Prefix	CSS property
m / p	margin / padding (all sides)
mx / px	margin-inline / padding-inline
my / py	margin-block / padding-block
ms / ps	margin-inline-start / padding-inline-start
me / pe	margin-inline-end / padding-inline-end
mbs / pbs	margin-block-start / padding-block-start
mbe / pbe	margin-block-end / padding-block-end
mt/mr/mb/ml	margin-top/-right/-bottom/-left (physical, non-logical)
pt/pr/pb/pl	padding-top/-right/-bottom/-left (physical, non-logical)

Value suffixes (apply to every prefix above): -<number> → calc(var(--spacing) * <number>); margin only also supports -<number> negated with a leading - (e.g. -mt-4) and auto (padding has no negative or auto form, since negative/auto padding isn't meaningful); -px → exactly 1px (and -<prefix>-px negative for margin); -(<custom-property>) → var(<custom-property>); -[<value>] → arbitrary value.

Space between children (space-x-*/space-y-*): applies margin only between direct children (not before the first or after the last) via a :not(:last-child) selector (changed from :not([hidden]) ~ :not([hidden]) in v3 → v4 for performance, see Upgrade Guide). -reverse variants (space-x-reverse/space-y-reverse) flip which side gets the margin, for use with flex-row-reverse/flex-col-reverse. For a flex/grid container, prefer gap-* over space-* — it doesn't rely on margin/sibling selectors and handles wrapping correctly.

Code Examples

<div class="px-6 py-4 pt-8">...</div>


<div class="relative">
  <img class="-mt-6 -mx-4 rounded-t-lg" src="..." />
</div>


<div class="space-y-4">
  <p>First</p>
  <p>Second</p>
</div>

• What it demonstrates: combining an axis shorthand with a physical-side override (later class wins on that one side only if it comes after in the generated CSS — see Styling with Utility Classes on conflicting utilities), a negative-margin bleed pattern, and space-y-* as a gap-free alternative for non-flex/grid stacks.

Key Takeaways

1. One value grammar (-<number>, -px, -(var), -[value], plus auto/negative for margin only) applies identically across all eleven direction prefixes — memorize it once.
2. Prefer gap-* inside flex/grid containers over space-x-*/space-y-* — gap handles wrapping and doesn't depend on sibling selectors or DOM order.
3. space-*-reverse exists specifically to pair with -reverse flex directions; forgetting it is the most common cause of "the gap is on the wrong side" bugs with flex-row-reverse.
4. Padding intentionally has no negative or auto variant — those aren't valid CSS for padding, unlike margin.

Connects To

• Theme: the --spacing token (a single multiplier, not a fixed list) is what every -<number> suffix here resolves against.
• Flexbox & Grid: gap-* is the layout-aware alternative to space-* inside flex/grid containers.
• Sizing: shares the same --spacing-based numeric scale as width/height.