{"id":32049,"date":"2025-01-31T11:01:33","date_gmt":"2025-01-31T10:01:33","guid":{"rendered":"https:\/\/mainetcare.de\/?post_type=techdoc&#038;p=32049"},"modified":"2026-07-14T11:35:16","modified_gmt":"2026-07-14T09:35:16","slug":"acss-gutenbricks-sections-how-to-avoid-leaks-between-sections","status":"publish","type":"gartenschuppen","link":"https:\/\/mainetcare.de\/en\/gartenschuppen\/acss-gutenbricks-sections-wie-man-luecken-zwischen-sektionen-vermeidet\/","title":{"rendered":"Automatic CSS + Gutenbricks + Sections: How to avoid \"gaps\" between sections."},"content":{"rendered":"<h2 class=\"wp-block-heading\">Problem<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the smart spacing of ACSS ensures distances between sections that are created with Gutenberg (or not with Bricksbuilder). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This behavior is not intended when working with Gutenbricks, for example. There, sections with full width should normally stick vertically directly to each other.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, ACSS Smart Spacing generates the following CSS code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.brxe-text<\/span> &gt; * + *, <span class=\"hljs-selector-class\">.brxe-post-content<\/span><span class=\"hljs-selector-pseudo\">where(<\/span><span class=\"hljs-selector-pseudo\">:not(<\/span><span class=\"hljs-selector-attr\">[data-source=<span class=\"hljs-string\">\"bricks\"<\/span>]<\/span>)) &gt; * + * {\n<span class=\"hljs-attribute\">margin-block-start<\/span>: <span class=\"hljs-built_in\">var<\/span>(--flow-spacing, initial);\n<span class=\"hljs-attribute\">margin-block-end<\/span>: <span class=\"hljs-number\">0px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Solution<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By default, ACSS offers a way to avoid margins for certain HTML elements. <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Call up ACSS<\/li>\n\n\n\n<li>Spacing &gt; Smart-Spacing &gt; Other &gt; Avoid Duplicate Margins<\/li>\n\n\n\n<li>\"section\" in the :is(...) bracket to the other HTML elements:<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-string\">\":is(section, figure, blockquote, ul, ol)\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-32049","gartenschuppen","type-gartenschuppen","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/gartenschuppen\/32049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/gartenschuppen"}],"about":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/types\/gartenschuppen"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/media?parent=32049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}