Comment by codedokode
2 years ago
> The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
Disagree. All margins, including horizontal, should collapse. Typically you want 20px between buttons, not 20 + 20.
The author isn't saying margin collapse should go away entirely (though, having had to implement it, it sure is tempting to get rid of the feature). Rather, they're talking about the situation in which a div is empty and has top and bottom margins. In that case, the top and bottom margins of that element collapse together into one combined margin, along with any preceding and following margins from elements lexically earlier and later in the document, respectively. This is a feature most designers probably don't realize exists, and it makes margin collapsing horribly complicated to implement (and, in CSS, it's important to remember that "complicated" typically means "slow").
I believe (but could be wrong) that this "collapse-through" feature was an accidental byproduct of the original CSS 2.0 definition of "adjoining margins", and not something that the original spec authors specifically contemplated.
In that case you probably want a `gap` of 20px, not a margin.
And this illustrates why margin as defined in CSS doesn’t really make sense at all. Outer margin is not usually a property of the element itself, but its container.
To be fair, it makes sense when you look at the use-case that spawned margins in the first place: <h1/><h2/>, <h1/><p/>, <h3/><h4/>, <h3/><p/>, etc... It does make for a fairly elegant way of handling all of those permutations with a reasonable amount of attributes. That comes in to play particularly in cases where you don't have control over which will show up in the wild (e.g. when dealing with Markdown content)
2 replies →
But I can get that functionality very easily with an owl selector, whereas opinionated default functionality means there are cases where I have to actively fight the system.
Just use top margin then.