# The Margin Collapse Rant by psychsillyo@sillypost.net



## Margin Collapsing Reason (initial mail, 2025-05-16 (UTC 20:22))

So in the early 1990s, CSS did not exist.
There was no specification for how HTML ought to be styled, beyond some limited things like <center> and <font> tags and some generic wisdom on what the elements are supposed to look like.

And all pages get laid out as lines of text with stuff in-between.

For the <p>aragraph element (and a few others, like <form> or <blockquote>), browsers just put an empty line before or after and maybe indented them a bit.

Now CSS comes around and adds margin to control spacing around any element.
The problem comes in when paragraphs need 1 line of margin above AND below them so that they are spaced away from anything you might put around them. (paragraphs need a margin above when they are below a table and margin above when below a table, for example)

But now adjacent paragraphs have 2 empty lines in-between and that is a lot of space and undesirable.
So that's why adjacent margins were made to collapse.

I can add more details if you want :3



## RE: Margin Collapsing Reason (response by twinkle@sillypost.net)

we love computer science history this is insightful information


okay but why didn't browsers just go "okay we'll automatically include a margin-bottom for block elements by default" instead of going "ah, we want margins for block elements, but we'd like to get rid of extra margin too"



## RE: RE: Margin Collapsing Reason

I think some block elements (like tables) weren't meant to have margins.

Also, if you have text outside of any block element, it should still be spaced away from preceding and following block elements.

Bla bla bla
<p>My Paragraph!</p>
bla bla bla

should still have space above and below the paragraph.



## More Margin collapsing ramblings (part 1/2)

Oh yea, back then margins also used to collapse away entirely at the top and bottom of flow roots also. (the body element and table cells)

This was to avoid having useless space around paragraphs in table cells but then Netscape Navigator had a bug where it would not remove the bottom margin cases like this:
<td>
  <p>Some stuff</p>
  <p></p>
</td>
(empty element after the last actual element)

Microsoft then implemented that bug into Internet Explorer for compatibility because they kept getting bug reports about it.

But with CSS in the picture, they decided that only default margins should collapse away like this. If a page author sets margins explicitly in CSS, those should stay since the author clearly wants them.

The spec on the other hand, did not include that extra detail.
khtml (which later got forked into Safari, then from there into Chromium) did this correctly, but Firefox did not.

And in general, every browser had a slightly different idea of how this should behave exactly.



## More Margin collapsing ramblings (part 2/2)

So because of that, this got relegated to quirks mode, aka. the old-websites-compatibility mode that gets to have extra bullshit rules.

But the spec was still wrong in claiming that all margins would disappear here, even author specified ones.

So in 2012-ish they set out to fix that.
And the guy fixing it had an easier time understanding the Firefox version, which amounted to a bunch of non-standard bullshit CSS selectors in the default stylesheet that did a very bad job at approximating the original behavior.

And they translated those to English and put them into the spec.
That is still the spec, to this day.
It is awful, every browser engine disagrees on the actual behavior and the Chrome devs want to remove it entirely (but this would break older websites a little)

And with that, I give to you:
The worst in terms of margin collapsing that HTML has to offer.
https://html.spec.whatwg.org/multipage/rendering.html#margin-collapsing-quirks