Vertical margin collapse

When two block-level elements are stacked on top of one another in normal document flow, their margins collapse. If the top and bottom margins of the two elements are equal in value, that value is used. If not, the greater of the two values is used to define the space between the elements.

This prevents paragraphs, headings, and other typographic elements from having "double-spacing" between the elements. It can, however, have unintended consequences for your layouts if you're not careful as the vertical margins of all elements collapse, not just textual elements.

This can be particularily tricky when you consider parent and child elements. Without something to keep the margins from touching (such as padding or a border), those margins collapse as well.

This means that if you set a top margin on a heading or paragraph inside a container element to hold it away from the top edge of the container, you're not guarenteed that you'll get the results you're after unless you account for margin collapse.