Hire UsGet CoreUI PRO all-access →

React Space between Utilities

Space between

MarkdownChatGPTClaude

Space siblings in a plain flow layout, where gap has no container to work from.

ClassStyles
.space-x-0margin-inline-end: var(--cui-spacer-0);
.space-x-1margin-inline-end: var(--cui-spacer-1);
.space-x-2margin-inline-end: var(--cui-spacer-2);
.space-x-3margin-inline-end: var(--cui-spacer-3);
.space-x-4margin-inline-end: var(--cui-spacer-4);
.space-x-5margin-inline-end: var(--cui-spacer-5);
.space-x-6margin-inline-end: var(--cui-spacer-6);
.space-x-7margin-inline-end: var(--cui-spacer-7);
.space-x-8margin-inline-end: var(--cui-spacer-8);
.space-x-9margin-inline-end: var(--cui-spacer-9);
.space-x-10margin-inline-end: var(--cui-spacer-10);
.space-x-11margin-inline-end: var(--cui-spacer-11);
.space-x-12margin-inline-end: var(--cui-spacer-12);
.space-y-0margin-block-end: var(--cui-spacer-0);
.space-y-1margin-block-end: var(--cui-spacer-1);
.space-y-2margin-block-end: var(--cui-spacer-2);
.space-y-3margin-block-end: var(--cui-spacer-3);
.space-y-4margin-block-end: var(--cui-spacer-4);
.space-y-5margin-block-end: var(--cui-spacer-5);
.space-y-6margin-block-end: var(--cui-spacer-6);
.space-y-7margin-block-end: var(--cui-spacer-7);
.space-y-8margin-block-end: var(--cui-spacer-8);
.space-y-9margin-block-end: var(--cui-spacer-9);
.space-y-10margin-block-end: var(--cui-spacer-10);
.space-y-11margin-block-end: var(--cui-spacer-11);
.space-y-12margin-block-end: var(--cui-spacer-12);
On this page

Overview

gap needs a flex or grid container. When the layout is plain flow — stacked blocks, an inline row of links — space-x-* and space-y-* put the spacing on the children themselves: every child except the last one gets a margin.

First
Second
Third
<div className="space-y-4">
  <div className="p-3 border">First</div>
  <div className="p-3 border">Second</div>
  <div className="p-3 border">Third</div>
</div>
<div className="space-y-4">
  <div className="p-3 border">First</div>
  <div className="p-3 border">Second</div>
  <div className="p-3 border">Third</div>
</div>

Horizontal

space-x-* does the same along the inline axis. It reads the writing direction, so in a right-to-left document the spacing lands on the correct side without another class.

First Second Third 
<div className="space-x-4">
  <a href="#">First</a>
  <a href="#">Second</a>
  <a href="#">Third</a>
</div>
<div className="space-x-4">
  <a href="#">First</a>
  <a href="#">Second</a>
  <a href="#">Third</a>
</div>

Changing axis across breakpoints

Both are responsive and take the same 0–12 steps from the $spacers map as every other spacing utility. Combining the two axes is the usual reason to reach for them: a stack on small screens that becomes a row further up needs the spacing to change axis with it.

First
Second
Third
<div className="d-md-flex space-y-4 space-y-md-0 space-x-md-4">
  <div className="p-3 border">First</div>
  <div className="p-3 border">Second</div>
  <div className="p-3 border">Third</div>
</div>
<div className="d-md-flex space-y-4 space-y-md-0 space-x-md-4">
  <div className="p-3 border">First</div>
  <div className="p-3 border">Second</div>
  <div className="p-3 border">Third</div>
</div>

space-y-4 spaces the stack, space-y-md-0 drops that spacing once the items sit in a row, and space-x-md-4 takes over along the inline axis.

How it works

The generated rule is wrapped in :where(), so it adds no specificity: a child that sets its own margin — a utility, or a component that ships with one — still wins, and you never need !important to escape the container’s spacing.

Customizing

Sass variables

Space utilities are generated from the $spacers map.

scss
$spacer: 1rem !default;
scss
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: defaults(
  (
    0: 0,
    1: calc(var(--cui-spacer) * .25),
    2: calc(var(--cui-spacer) * .375),
    3: calc(var(--cui-spacer) * .5),
    4: calc(var(--cui-spacer) * .75),
    5: var(--cui-spacer),
    6: calc(var(--cui-spacer) * 1.25),
    7: calc(var(--cui-spacer) * 1.5),
    8: calc(var(--cui-spacer) * 1.75),
    9: calc(var(--cui-spacer) * 2),
    10: calc(var(--cui-spacer) * 2.25),
    11: calc(var(--cui-spacer) * 2.5),
    12: calc(var(--cui-spacer) * 3),
  ),
  $spacers
);

Space utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss
"space-x": (
  responsive: true,
  property: margin-inline-end,
  class: space-x,
  child-selector: "> :not(:last-child)",
  values: $utilities-spacers
),
"space-y": (
  responsive: true,
  property: margin-block-end,
  class: space-y,
  child-selector: "> :not(:last-child)",
  values: $utilities-spacers
),