Collapsing margin

The expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. In CSS 2.1, horizontal margins never collapse.

Anything that stops adjoining margins from “touching” each other will prevent them from collapsing.

Try These

Watch This

aqua

yellow

pink

Check This

<div id="aqua"><p>aqua</p></div> <div id="yellow"><p>yellow</p></div> <div id="pink"><p>pink</p></div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).