CSS – gap vs. margin

Abstände zwischen Elementen lassen sich in CSS auf verschiedene Wege setzen. Lange Zeit war margin die einzige Möglichkeit – bis gap in Flexbox und Grid Einzug hielt. Beide funktionieren, aber sie denken das Problem unterschiedlich. Zu wissen wann welches besser passt, spart Arbeit und vermeidet typische Stolperfallen.

Abschnitte: Das Problem mit margin, Was gap besser macht, row-gap und column-gap, Wann margin noch sinnvoll ist.

Das Problem mit margin

Mit margin setzt du Abstände direkt am Element – das klingt logisch, hat aber einen Haken: Das erste und letzte Element bekommen denselben Abstand wie alle anderen, auch wenn du das nicht willst. Du landest schnell bei Workarounds wie :first-child oder :last-child: 

.karte {
  margin-right: 2rem; /* jede Karte bekommt Abstand rechts */
}

/* aber die letzte soll keinen haben */
.karte:last-child {
  margin-right: 0;
}

Das funktioniert, ist aber umständlich – besonders wenn sich die Anzahl der Elemente ändert oder das Layout responsive wird.

Was gap besser macht

gap wird nicht am Element selbst gesetzt, sondern am Flex- oder Grid-Container. Es beschreibt den Abstand zwischen den Elementen – das erste und letzte Element bekommen automatisch keinen äußeren Abstand. Kein :last-child, kein Workaround: 

.container {
  display: flex;
  gap: 2rem; /* Abstand zwischen allen Kindelementen */
}

/* Kein Workaround nötig – erstes und letztes Element
   haben außen keinen Abstand */

Das Ergebnis ist dasselbe, der Code aber sauberer und wartbarer.

row-gap und column-gap

gap ist eine Kurzschreibweise für row-gap und column-gap. Du kannst beide Richtungen unabhängig voneinander steuern – besonders in Grid-Layouts nützlich: 

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;              /* gleicher Abstand in beide Richtungen */
  gap: 1rem 2rem;         /* row-gap | column-gap */

  row-gap: 1rem;          /* nur vertikaler Abstand */
  column-gap: 2rem;       /* nur horizontaler Abstand */
}

Wann margin noch sinnvoll ist

gap funktioniert nur innerhalb von Flex- und Grid-Containern – für alles andere bleibt margin die richtige Wahl. Außerdem gibt es Situationen wo du bewusst einen Außenabstand an einem einzelnen Element willst, unabhängig vom Rest des Layouts:

  • Abstand eines Elements vom Seitenrand oder einem anderen Bereich außerhalb des Flex/Grid-Kontexts → margin
  • Ein einzelnes Element soll sich vom Rest abheben, z. B. mit margin-left: auto in einer Flex-Zeile um es nach rechts zu schieben → margin
  • Abstände zwischen allen Kindelementen eines Flex- oder Grid-Containers → gap
.nav {
  display: flex;
  gap: 1.5rem; /* Abstände zwischen den Nav-Links */
}

.nav .login {
  margin-left: auto; /* Login-Button an den rechten Rand schieben */
}

gap und margin schließen sich also nicht aus – sie ergänzen sich. gap für den Rhythmus im Layout, margin für gezielte Ausnahmen.