A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
It's far easier to understand margin collapsing when you get down to the theory and understand block formatting contexts
The reason flex and grid don't have the same behaviour is because they create formatting context for their childs. But honestly, there are a bazillion other properties that can create a new formatting context and therefore prevent margin collapsing, e.g. 'display: table', 'column-count: 1', or 'display:flow-root', just to name a few.
Relying on the "margin top only" approach is a recipe for disaster, as it won't prevent the issues caused by collapsing of the margins between parent and first child.
If you master the idea of formatting contexts, it takes all the weirdness out of floats and margins.
It's far easier to understand margin collapsing when you get down to the theory and understand block formatting contexts
The reason flex and grid don't have the same behaviour is because they create formatting context for their childs. But honestly, there are a bazillion other properties that can create a new formatting context and therefore prevent margin collapsing, e.g. 'display: table', 'column-count: 1', or 'display:flow-root', just to name a few.
Relying on the "margin top only" approach is a recipe for disaster, as it won't prevent the issues caused by collapsing of the margins between parent and first child.
If you master the idea of formatting contexts, it takes all the weirdness out of floats and margins.
Thanks for your input The idea of the post is to bring up the problem. I may add your thoughts on the article after reading your resources, thanks!