I have the following scenario:
Adding 80px row spacing to “Container 3” also adds white space at its top, before any objects inside of it. Afaik this is not standard flexbox behavior as can be seen on this simple mockup, gap produces no white space before/after items, only between: https://codepen.io/araklaj/pen/wvmbQXK
How do I avoid this extra space, is there some setting I am missing/getting wrong?
Website: https://test-155ef4.webflow.io/
I have a feeling that you already have Container 3 used and it is inheriting settings.
If you are interested in seeing what is affecting your layout you would need to inspect in devtools for example. If you provided a link to a published URL with your post as suggested in the guidelines, I would have been able to tell you. If you update your post, I might circle back or someone else might to provide an answer.
I added the published site now, thought that was a common enough setting mistake but seems not. I did inspect it in the dev tools, and the white space was coming from adding the flexbox gap.
It looks like the white space is gone to me
This is being caused by styling of a Webflow “container”. Use a div with the CSS you need instead.
.w-container:before, .w-container:after {
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
The content declaration is where the issue arises from. I personally don’t use “containers” and always build my own so issues like this don’t ever pop up. Webflow is stuck supporting stuff they introduced long ago since a change has the potential of breaking untold sites.
This does also happen with pre built containers I’ve found. Not all of them, just some of them. But this is also 100% the reason with Rich Text blocks. So if you use Flexbox Gap with a Rich Text block, make sure you’re top and bottom margin are negative the amount of the gap.