And then you can’t nest one container into another, because there is only one “margin” rule and they don’t add up. You start to wrap children into separate containers only to find out that it breaks more and more “nice and simple css tricks” you used before. Eventually you end up with half-broken bootstrap/etc clone that even supports component design if looked at from afar. After few weeks it starts to feel like not using components at all would be much less of a maintenance. Css “tricks” are full of these situational traps.
If you want to keep doing this, it’ll save you a whole lot of heartache if you also wholesale prevent margin collapsing. In fact, some people recommended that as a baseline default (I personally find it great for layout but surprisingly mixed for typography).
If only we had <sizer> (or display:sizer) element that could expand, disappear on wrap and not count as a regular child (sort of like a space in a text node)… But that would be so '90s.
decorative nodes to the DOM doesn’t seem like a good solution
Why? You could add the same constraints to the sizer: min, max, flex shrink/grow, put a line or any other shape in it. It wouldn’t even take a separate “display” mode, just make :row-start, :row-end and :row-wrap pseudoclasses to control collapsibility of regular divs at the sides of a container (or whatever styling you need, anything). Instead they feed us yet another crippled special case with these gaps.