Here’s a one-sentence blog post about margin collapsing: When two block elements are stacked on top of one another, the vertical space between them is the larger between the one on top’s margin-bottom and the one on the bottom’s margin-top.
It’s a bit weird and ascii-shruggy. Couple caveats with them, as you might expect.
I find it fascinating how it makes for the perfect sort of mini blog post when people have an ah-ha moment about it. MDN even sees fit to have a dedicated page.
Although the margin collapse behavior is at first a little unintuitive, it does make life easier in the case of multiple nested elements, where the behavior is often desirable.
It’s probably not the most intuitive aspect of CSS, but the takeaway here is that there is some logic at play and, once you have learned it, the mystery and confusion suddenly disappears!
Do you see how collapsing margins can make things tricky? I personally encounter this on a frustratingly frequent basis when dealing with typography.
Margin collapsing can be frustrating to deal with, but knowing when and how it happens will make it easier for you to fix problems when they occur.
Collapsible margins can be a pain if you don’t properly understand when they occur. The first step to dealing with or avoiding them is [to] understand exactly which case of collapsible margins we are dealing with.
Margin collapse is something that mentioned in every CSS book’s first or second chapter. When I learned about the stylesheets in a long time ago, of course, I read about it.
The concept of margin collapse is foundational to an understanding of the box model in CSS, but it is actually quite complex and potentially confusing. The spec describing how margin collapse works is thorough but difficult to understand.
I don’t point all these out to say it’s an over-blogged subject (nothing is), but that it’s an interesting thread to follow. When so many people feel the need to explain something ultimately so small, there is something weird (probably bad) happening there.
No doubt this is why it’s considered one of the mistakes in the design of CSS:
The top and bottom margins of a box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
Emphasis theirs and is, in fact, the only bold text in the entire list.
If you’re looking to stop the behavior, you’ll need to do something that probably has more side effects than it’s worth, like float the elements. It’s not quite as simple as kicking off a new Block Formatting Context, as that’s what display: flow-root; does and that doesn’t work.
You’re probably better off just knowing about it and dealing with it as it comes up by systematically flowing margins in one direction, or getting weird.
I don’t apply margin to an element that shares space with other elements. I put the elements in a parent div, and the margins of the child elements simply change the size of the parent elements. Because of this habit, I don’t have to deal with Margin Collapse.
Margin collapse can also occur between parent and child elements.
In the early days of HTML and CSS, margin collapse was very helpful. Imagine having two paragraphs with default top/bottom margin. The space between them would be doubled if not for margin collapse.
Once we started using CSS for layout, that’s when it became problematic. I find it helpful to simply remove top margin from every element in my reset style sheet. Then you don’t have to worry about vertical margins touching.
When I first learned about css in, um, 2005?, no one told me about margin collapse (and there weren’t many great books or online sources), so I was confused as hell as to why they didn’t add up. When I learned that it was some thing to make paragraph and header spacing convenient, I scoffed. Then I tried float something, say, left, and put 20px margin on the right… well, IE6 would kindly double that (why? because of course it did!) I quickly learned to love padding and didn’t revisit margins for maybe 8 more years.
I only learned to love them for their negative values!
Once I had a solid grasp of margin collapsing I realized how valuable it is in doing certain layouts. For example, if you have an article margin collapsing can be very handy in putting margins around article body elements like paragraphs, image embeds, headings etc. Without margin collapsing I would have to resort to sibling selectors but with it I can have simplier CSS for the many configurations of article text.
Margin is describing the minimal space other elements should stay away from the current box, it makes sense for margin to share space and collapse. If anything, I think the margin of a child should be collapse into the padding of the parent as padding is basically inward margin.
I think of margin as empty space defined by “at least this much space”. Thus, when you have two margins that meet, they have to agree on how much empty space there should be between them:
Margin 1: “Well, I need at least 25px below me.”
Margin 2: “Psh, I require at least 50px above me!”
Margin 1: “Oh, well that’s more than 25px, so we’ll go with that then.”
Margin 1 and 2 shake hands from 50px away, everyone goes on their way happy.
It’s not really margin collapse, because no one is LOSING any of their required empty space. It’s margin agreement. They both agree to use just as much space as meets both of their requirements.
You know what makes me angry though? That inside a flex element margins don’t collapse. I don’t know why, but I feel like it’s a sort of a betrayal of my expectations.