Collapsing Margins

Collapsing Margins

Easy CSS tip that might save you some time while debugging or developing.

Accoring to W3C Specification "In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin."


If we take two block level elements together as siblings and 
Collapsing Margins test page.


- add "margin-bottom: 30px" rule to the top one
- add "margin-top: 50px" rule to the bottom one
the space between these two will be 50px due to combination of the two margins...

For more information on the topic please go to W3C page.