CSS collapsing margins: what is their purpose?

Question

The CSS2 box model tells us that adjacent vertical margins will collapse.

I find this annoying as it is the source of many design errors. I'm hoping that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when not needed.

What is the purpose of this feature?

Answer 1

The general meaning of "margin" is not to convey "move it 10px" but rather "there must be 10px of white space next to this element."

I have always found this to be the easiest to conceptualize in paragraphs.

If you specify margin-top: 10px only for paragraphs and no margins on any other elements, a series of paragraphs will be beautifully spaced. But, of course, you'll run into trouble when you place another element below the paragraph. The two will touch.

If the margins were not collapsed, you would be hesitant to add margin-bottom: 10px to the previous code, because then any pair of paragraphs would be 20px apart, and the paragraphs would be separated from other elements by only 10px .

So the vertical margins will collapse. By adding 10 pixels of top and bottom margin, you're saying: "I don't care about the margin rules for other elements. I require at least 10 pixels of padding above and below each paragraph."