In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”.
Margin collapse occurs when vertically adjacent margins of block-level elements collide to share a general margin space. The larger number margin dictates the size of this shared space.
If a margin of 24px collides with a margin of 56px, the 56px margin will win. If a margin of -24px collides with a margin of -56px, -56px will win.
This will help prevent unnecessary variants for the functionality of adding/removing space within components.
Toggling margin collapse as conditional in auto layout will save time and get design closer to development.
Here is more on margin collapse.
Wondering: In Figma there is no margins per se, you cannot make an elements with “outside spacing”, how do you see it then?
That’s an excellent question… we add margins to auto-layout.
To add margins in auto-layout, we employ different techniques. One method involves combining two elements using auto-layout and utilizing the space-between property. However, auto-layout blurs the distinction between padding and margins since it ignores the box model, which is a fundamental concept in CSS. If Figma aims to bridge the gap between design and development, it would be wise to incorporate the box model into auto-layout.
That’s interesting one indeed. Collapsing margins are property of the standard box model. As fast as I can see auto layout inherits flex one which does not have any of it. So you can “emulate” element margins either with gap or with internal padding. What’s interesting when you explore auto layout element in dev mode css output to use css gap property indeed.
To a certain degree I am convinced their model works, you can get fairly accurate css output from any good auto layout design.
And it is an open question whether it was I right call. For me it’s fair enough 
It works in a predictable manner, rules makes sense, there’s a connection with real code base.
I agree, their model fairly works. This is just a “nice to have”.
It is very disappointing to find out that Figma doesn’t support margin collapse. This is a fundamental property of how typography works on the web and not having this available creates all kinds of problems for us during design and development. I can see that this is something that has been requested repeatedly and I don’t see any answer from Figma about it.
1 Like