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-medium p-medium bg-evident">
  <div class="d-inline-block p-small bg-main">Item 1</div>
  <div class="d-inline-block p-small bg-main">Item 2</div>
  <div class="d-inline-block p-small 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 xsmall to 2xlarge, 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 xsmall and .{breakpoint}:{property}-{size} for small, medium, large, xlarge, and 2xlarge.

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
• 4xsmall - default token value is 0.0625rem (1px).
• 3xsmall - default token value is 0.125rem (2px).
• 2xsmall - default token value is 0.25rem (4px).
• xsmall - default token value is 0.5rem (8px).
• medium - default token value is 1rem (16px).
• large - default token value is 1.25rem (20px).
• xlarge - default token value is 1.5rem (24px).
• 2xlarge - default token value is 1.75rem (28px).
• 3xlarge - default token value is 2rem (32px).
• 4xlarge - default token value is 2.25rem (36px).
• 5xlarge - default token value is 2.5rem (40px).
• 6xlarge - 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-medium p-medium bg-evident">
  <div class="d-inline-block p-small bg-main">Item 1</div>
  <div class="d-inline-block p-small bg-main">Item 2</div>
  <div class="d-inline-block p-small 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-medium p-medium bg-evident">
  <div class="p-small bg-main">Item 1</div>
  <div class="p-small bg-main">Item 2</div>
  <div class="p-small 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-medium > :not(:last-child)) {
  margin-inline-end: 1rem;
}
:where(.space-y-medium > :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))
),