u-gap zeigt keine Wirkung

Kurzantwort: Der Container steht auf Block. u-gap-- setzt die CSS-Eigenschaft gap, und die wirkt ausschließlich bei display: flex oder display: grid. Stell den Container auf Flex — dann greift die Klasse sofort.

Warum das so ist

gap beschreibt den Abstand zwischen den Kindelementen eines Containers. Diesen Begriff kennt der Browser nur in einem Flex- oder Grid-Layout, weil es nur dort eine definierte Reihenfolge mit Zwischenräumen gibt. In einem gewöhnlichen Block-Container stapeln sich die Kinder ohne dieses Konzept — die Eigenschaft wird gesetzt und ignoriert.

Es gibt also keine Fehlermeldung und keinen sichtbaren Hinweis. Die Klasse steht korrekt im Feld, sie ist auch nicht falsch geschrieben — sie hat nur nichts, worauf sie wirken könnte.

Der Fix

  1. Container anklicken.
  2. Reiter Stil → Bereich Layout.
  3. Anzeige von Block auf Flex stellen.
  4. Richtung wählen: vertikal für untereinander, horizontal für nebeneinander.

Die Lücke aus u-gap-- greift sofort. Den Zahlenwert im Feld Abstände daneben lässt du leer — sonst steht dort ein fester Pixelwert in der lokalen Klasse, der die Klasse überstimmt.

Welche Container schon passen

Element / Klasse Anzeige u-gap-- wirkt
Flex-Container (Elementor) Flex ja
l-stack Grid ja
l-cluster Flex ja
l-grid Grid ja
Div-Block (Elementor) Block nein — erst umstellen

Im Normalfall arbeitest du mit Flex-Containern; der Div-Block ist der Sonderfall. Wer l-stack oder l-cluster vergibt, bekommt die passende Anzeige automatisch aus der Klasse.

Wenn der Container auf Flex steht und trotzdem nichts passiert

  • Ein Zahlenwert steht im Feld Abstände. Der landet in der lokalen Klasse und gewinnt gegen die Klasse. Zurücksetzen.
  • Falsche Ebene. u-gap-- gehört an den Container, nicht an das Kindelement. In der Struktur-Ansicht prüfen.
  • Nur ein Kindelement. Eine Lücke braucht zwei Nachbarn — bei einem Element ist nichts zu sehen.
  • Falsches Kürzel. Es gibt u-gap--xxs bis u-gap--5xl, aber kein u-gap--md.
Nicht verwechseln: u-gap-- ist der Abstand zwischen Kindelementen, u-p-- der Innenabstand des Containers zu seinem Inhalt, u-mb-- der Abstand eines Elements nach unten. Wer nach oben und unten mehr Luft am Abschnitt will, nimmt keine der drei, sondern eine Sektionsstufe wie l-section--l.

Verwandte Artikel