99

The CSS2 box model tells us that adjoining vertical margins collapse.

I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed.

What is the purpose of this feature?

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
Tom
  • 6,991
  • 13
  • 60
  • 78
  • 3
    adjoining **vertical** margins collapse – sam Oct 10 '13 at 01:51
  • 2
    Because CSS is a design-by-committee nightmare and some member made a large "contribution" to w3c to get this included as it solved one of their use cases at the time. – A.R. Aug 19 '21 at 16:50
  • avoid margin collapse using display: block – nativelectronic Oct 28 '21 at 04:45
  • This is conjecture, but collapsing does head off a fair amount of potential headaches with regards to WYSIWYG editors. Stray paragraph tags and weird nesting end up not having margin problems. – Brendan Jun 03 '22 at 20:39

1 Answers1

122

The general meaning of "margin" isn't to convey "move this over by 10px" but rather, "there must be 10px of empty space beside this element."

I've always found this is easiest to conceptualize with paragraphs.

If you just gave paragraphs margin-top: 10px and had no margins on any other elements, a series of paragraphs would be spaced beautifully. But of course, you'd run into trouble when placing another element underneath a paragraph. The two would touch.

If margins didn't collapse, you'd hesitate to add margin-bottom: 10px to your previous code, because then any pair of paragraphs would get spaced 20px apart, while paragraphs would separate from other elements by only 10px.

So vertical margins collapse. By adding top and bottom margins of 10px you're saying, "I don't care what margin rules any other elements have. I demand at least 10px of padding above and below each of my paragraphs."

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
VoteyDisciple
  • 37,319
  • 5
  • 97
  • 97
  • 1
    +1. The same logic applies outside CSS. For example in Microsoft Word, if there is a margin of 12px after a title and of 6px before the paragraph, if the paragraph follows the title, there will be 12px space, not 18px. – Arseni Mourzenko Aug 22 '10 at 19:26
  • 3
    right - they collapse - UNLESS they are not the same dom level. E.g. try collapsing [this](http://jsfiddle.net/gDuzC/2/) imho simply: it really IS annoying – Toskan Aug 29 '12 at 17:24
  • 5
    You mean "UNLESS they're inside a table row". Table rows aren't block-level elements; they have some unique rules. See http://stackoverflow.com/questions/136727/why-doesnt-a-tables-margin-collapse-with-an-adjacent-p for a fuller explanation. – VoteyDisciple Aug 31 '12 at 16:31
  • 3
    how about adding the `margin-top` for that element too? – Minh Nghĩa Jun 06 '19 at 16:22
  • 1
    Except its much more complicated. E.g. I have a heading with top margin, and it doesnt apply the top margin, even though the block its in is a different color, due to some complicated block flow grouping. that deems it doesnt need to apply the margin. They designed these rules to make documents slightly easier to style, whereas to design real websites its much harder, and all these inconsistences makes it even harder – run_the_race Mar 30 '22 at 12:24
  • The color definitely wouldn't have any impact on whether a margin is applied or not. Margin just has to do with space around the outside of the element. (To make a different color visible, you probably want `padding`). You're quite right that complicated sites require complicated style rules. – VoteyDisciple Mar 30 '22 at 16:12