31.01.2025, Technical documentation & snippets

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 behavior is not intended when working with Gutenbricks, for example. There, sections with full width should normally stick vertically directly to each other.

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 a way 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)

See also