Hacker News Reader

Comment by codedokode | Hacker News Reader

> 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.

View on HN

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)

Even for text flows, the margins should be derived from properties of the container.

Traditional graphic designers creating print layouts didn’t use randomly different margins for elements on a page. The margins were derived from a grid system that was applied to the entire page. Within that system, the margin between a body paragraph and a header might be (for example) two grid squares, while the margin between body paragraphs would be one grid square.

CSS designers should have thought more conceptually about the HTML page as a container for text elements. Instead they just created a whole bunch of properties that allow elements themselves to define any spacing anywhere in any units, then tried to patch up the conceptual mess with hacks like margin collapse.

There is no way to define proper rhythm hierarchy (multiple paragraphs with own titles with greater gravity) with only collapsing margins in CSS it's almost always hacks with fist/last children.

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.

Reply on news.ycombinator.com