However, I have applied margins to the top and bottom of my section element (flex) in theme styles via clamp, but for a basic example, let us say 50px (top and bottom margin)
If I add two sections on a page, the gap between them should be 100px: 50px bottom-margin from the top section and 50px top-margin from the second section.
However, I just have 50px separating the two sections.
Not sure if I am not understanding the principals correctly?
As I understand it, the two margins of the sections should add up. In Bricks 1.4.0.2 this is at least the case for the containers.
I see the difference between the two Bricks versions in the enclosing main element. in 1.4.x it is set to display flex, but in 1.5 it is set to display block.
Hi guys, @HeroRox got it right. Display: flex on #brx-content has fallen victim to the desire for fewer defaults and more standards, so the margin collapse is now visible.
Margin collapse has existed since āthe beginningā of CSS. If you want to read more about it, I recommend the following article: The Rules of Margin Collapse
How to get around it:
Option 1) Use only one margin - either top or bottom (and adjust the :first-child of the section accordingly)
Option 2) Set #brx-content back to display flex, flex-direction column (in Bricks Ā» Settings Ā» Custom CSS). However, I assume that problems/unexpected behavior may occur here and there. #needstesting
Is it possible to find out from Thomas & Luis when you get chance to see what was one or some of the reasons it had to give way, perhaps that might explain what issues we can expect if we opt to revert it back to flex. If the sacrifice is too large, I will choose option 1, albeit it takes away some flexibility.
You can also just try option two and see if there are problems somewhere. If so, remove the two lines of custom CSS and adjust your theme style settings for option one I think this is the faster and more effective way.
I think this is the faster and more effective way.