Steuere den Abstand zwischen den direkten Kindelementen eines Elements – auch ohne Flexbox oder Grid.

Anders als die Gap-Utilities, die ein Flex- oder Grid-Layout voraussetzen, funktionieren die Space-Utilities an jedem Elternelement: Sie setzen Außenabstände an die Kinder.

• .space-x-* für horizontale Abstände per margin-inline-end.
• .space-y-* für vertikale Abstände per margin-block-end.
• Responsiv mit Breakpoint-Präfix, z. B. md:space-y-3.
• Null Spezifität dank :where() – leicht zu überschreiben.

Mehr zur Eigenschaft margin im MDN.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiel

Die Space-Utilities verteilen den Abstand über die Kinder und brauchen kein Flex- oder Grid-Layout am Elternelement.

<div class="d-flex space-x-3 p-3 bd-pattern-diagonal rounded-3">
    <div class="p-3 bg-subtle-accent fg-accent rounded-3">Element 1</div>
    <div class="p-3 bg-subtle-accent fg-accent rounded-3">Element 2</div>
    <div class="p-3 bg-subtle-accent fg-accent rounded-3">Element 3</div>
  </div>

Die erzeugten Selektoren stecken in :where() und haben damit null Spezifität. Du kannst sie also problemlos mit anderen Utilities oder eigenem CSS überschreiben.

Notation

Klassen für alle Breakpoints von xs bis 2xl tragen kein Breakpoint-Kürzel, denn sie gelten ab min-width: 0 ohne Media Query. Die übrigen Breakpoints bekommen ein Präfix.

Das Schema lautet {property}-{size} für xs und {breakpoint}:{property}-{size} für sm, md, lg, xl und 2xl.

property ist eines von:

• space-x – horizontaler Abstand per margin-inline-end
• space-y – vertikaler Abstand per margin-block-end

size ist eines von:

Weitere Größen ergänzt du über die Sass-Map $spacers.

Horizontal

Mit space-x-* steuerst du den horizontalen Abstand zwischen den Kindern:

<div class="d-flex space-x-3">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

Vertikal

Mit space-y-* steuerst du den vertikalen Abstand zwischen den Kindern:

<div class="space-y-3">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

Funktionsweise

Die Space-Utilities setzen margin-inline-end bzw. margin-block-end an jedes direkte Kind außer dem letzten – über den Selektor :where(.space-x-3 > :not(:last-child)). Durch :where() bleibt die Spezifität bei null, sodass du einzelne Kinder einfach mit normalen Margin-Utilities überschreiben kannst.

:where(.space-x-3 > :not(:last-child)) {
  margin-inline-end: .5rem;
}

Die Sass-Definition in der Utilities-API findest du in der Originaldoku.