Space

Overview

Space utilities control the spacing between direct children of an element by applying margin-inline-end or margin-block-end to all children except the last. Unlike gap utilities which require a flex or grid formatting context, space utilities work on any parent element.

<div class="space-x-md p-md bg-evident">
  <div class="d-inline-block p-sm bg-main">Item 1</div>
  <div class="d-inline-block p-sm bg-main">Item 2</div>
  <div class="d-inline-block p-sm bg-main">Item 3</div>
</div>

The selectors generated for space utilities are wrapped in :where() for zero specificity, making them easy to override with additional utilities or custom CSS.

Notation

Space utilities that apply to all breakpoints, from xs to 2xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}-{size} for xs and .{breakpoint}:{property}-{size} for sm, md, lg, xl, and 2xl.

Where property is one of:

• space-x — for classes that set horizontal spacing via margin-inline-end
• space-y — for classes that set vertical spacing via margin-block-end

Where size is one of:

• zero or 0 — for classes that eliminate spacing by setting it to 0
• 4xs - default token value is 0.0625rem (1px).
• 3xs - default token value is 0.125rem (2px).
• 2xs - default token value is 0.25rem (4px).
• xs - default token value is 0.5rem (8px).
• md - default token value is 1rem (16px).
• lg - default token value is 1.25rem (20px).
• xl - default token value is 1.5rem (24px).
• 2xl - default token value is 1.75rem (28px).
• 3xl - default token value is 2rem (32px).
• 4xl - default token value is 2.25rem (36px).
• 5xl - default token value is 2.5rem (40px).
• 6xl - default token value is 3rem (48px).

Horizontal

space-x-* utilities control the horizontal space between children by applying margin-inline-end to all children except the last.

<div class="space-x-md p-md bg-evident">
  <div class="d-inline-block p-sm bg-main">Item 1</div>
  <div class="d-inline-block p-sm bg-main">Item 2</div>
  <div class="d-inline-block p-sm bg-main">Item 3</div>
</div>

Vertical

space-y-* utilities control the vertical space between children by applying margin-block-end to all children except the last.

<div class="space-y-md p-md bg-evident">
  <div class="p-sm bg-main">Item 1</div>
  <div class="p-sm bg-main">Item 2</div>
  <div class="p-sm bg-main">Item 3</div>
</div>

How it works

Space utilities apply margin-inline-end or margin-block-end to every direct child except the last via a :not(:last-child) child selector. The selector is wrapped in :where() for zero specificity, so individual children can be overridden with standard margin utilities.

:where(.space-x-md > :not(:last-child)) {
  margin-inline-end: 1rem;
}
:where(.space-y-md > :not(:last-child)) {
  margin-block-end: 1rem;
}

CSS

Space utilities are generated via the utilities API.

Reference

The table lists all space utilities and their CSS properties.

Utilities API

Space utilities are declared in scss/utilities/_index.scss using the utilities API.

"space-x": (
  responsive: true,
  property: margin-inline-end,
  class: space-x,
  child-selector: "> :not(:last-child)",
  values: map.merge(map-loop($spaces, varify, "$key", "space"), (0: 0))
),
"space-y": (
  responsive: true,
  property: margin-block-end,
  class: space-y,
  child-selector: "> :not(:last-child)",
  values: map.merge(map-loop($spaces, varify, "$key", "space"), (0: 0))
),