Automatic CSS + Gutenbricks + Sections: Wie man “Lücken” zwischen Sektionen vermeidet.

Problem

Per Default sorgt das Smart-Spacing von ACSS für Abstände zwischen Sections, die mit Gutenberg (bzw. nicht mit Bricksbuilder) erzeugt werden.

Dieses Verhalten ist nicht beabsichtigt, wenn man z.B. mit Gutenbricks arbeitet. Dort sollen normalerweise Sektionen mit voller Breite vertikal direkt aneinander kleben.

Per Default erzeugt das Smart-Spacing von ACSS folgenden CSS-Code:

.brxe-text > * + *, .brxe-post-content:where(:not([data-source="bricks"])) > * + * {
margin-block-start: var(--flow-spacing, initial);
margin-block-end: 0px;
}Code-Sprache: CSS (css)

Lösung

ACSS bietet von Haus aus eine Möglichkeit, um Margins bei bestimmten HTML-Elementen zu vermeiden.

1. ACSS aufrufen
2. Spacing > Smart-Spacing > Other > Avoid Duplicate Margins
3. “section” in die :is(…) Klammer zu den anderen HTML-Elementen hinzufügen:

":is(section, figure, blockquote, ul, ol)"Code-Sprache: JSON / JSON mit Kommentaren (json)