Automatic CSS + Gutenbricks + Sections: How to avoid "gaps" between sections.

Problem

By default, the smart spacing of ACSS ensures distances between sections that are created with Gutenberg (or not with Bricksbuilder).

This behaviour is not intended when working with Gutenbricks, for example. There, sections with full width should normally stick directly to each other vertically.

By default, ACSS Smart Spacing generates the following CSS code:

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

Solution

By default, ACSS offers an option to avoid margins for certain HTML elements.

1. Call up ACSS
2. Spacing > Smart-Spacing > Other > Avoid Duplicate Margins
3. "section" in the :is(...) bracket to the other HTML elements:

":is(section, figure, blockquote, ul, ol)"Code language: JSON / JSON with Comments (json)