Margin-collapsing can sometimes be tricky to CSS beginners; especially as modern browsers support CSS better, collapsing margins is something that you could easily run into. However, Andy Budd has written an extended blog entry on the workings behind collapsing margins.
For the most part, margin collapsing has few rules:
At its core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one “collapses” to nothing. […]
For example, if you have two adjacent paragraphs, the first with a 20px bottom margin and the second with a 15px top margin, the space between them will only be 20px — since the smaller of the two margins (15px) collapses into the larger one (20px).
It can get a bit tricky when borders come into play. In the case of borders, the two elements’ margins are no longer directly touching and so the margins don’t collapse. I’ve run into that one a few times when I’ve turned on borders on an element (for debugging) and then found the layout to be wildly different after I finished debugging and turned off the borders.
The article also goes on to talk about how margins collapse around floated elements. But, most beginners who would run into collapsing margins may not be using floats as a layout technique anyhow. In all, I found the article informative and I won’t hesitate to refer to it if I run into some weird collapsing issues.
Nice article. A correction in your commentary, though… turning on borders would *not* affect the margin collapsing of the adjacent paragraphs in your example scenario, since borders do not prevent the margins of adjacent elements from touching. Borders (and padding for that matter) would, however, prevent margin collapsing for nested elements since the border/padding of the outer box comes in between the margin of the outer box and the margin of the inner box, preventing those margins from touching and they therefore cannot collapse.
Ah — thanks for clarifying that, Jason.