Collapsing Margin

From CSS Discuss

Jump to: navigation, search

Two consecutive vertical margins collapse if there is no border or padding that fall between them. The result is a single margin area, which is a sort of "no man's land" -- positioned content within the blocks may appear to behave oddly.

Believe it or not, collapsing margins has been around for a long time and is what you expect to happen in many cases -- you just take it for granted. Read Eric Meyer's Uncollapsing Margins for an explanation of what margin collapsing is, why it exists, and how to stop it when you want to.

Here is a practical explanation, with examples, by Andy Budd:-

Here is an example with even more illustrations:

and here is the CSS2.1 specification:[1]

Category CSSConcept

Personal tools