CSS Top-Margin Issue

Question

Does anyone know why I don\'t get a top-margin in the first div based on the CSS below? This renders the same in Chrome, Safari and Firefox 4 running on Mac OSX Lion (render

Answer 1

You're running into a common problem called "collapsing margins." Basically, whenever vertical margins touch (even when one element is inside another element), the margins collapse.

In this case your margin property on the inner div is collapsing into the margin-bottom: 20px; property on your outer div. To fix this, add a little padding or a border around the containing element.

Just tried this using your code and it works: http://jsfiddle.net/hWPyD/2/

More info on collapsing margins: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

Its because there is a default margin and padding on html tags. Use a reset like this one to remove all of the browser defaults. (I highly recommend doing this)