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 to collapse.

Style the yellow box with:

	border-color: transparent

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).