CSS margin pushing the body element
css, html, layout, margins
Solution
This sounds similar to a problem I had: Margins and negative margins. I solved mine by putting a padding-top rather than a border, maybe this works with your design slightly better? Otherwise try this link: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
Problem
I'm setting a margin for a div element, however the body element also gets that margin. Consider this code: ``` <!-- HTML --> <body> <div> </div> </body> <!-- CSS --> <style> html,body { height:100%; margin:0; padding:0; outline:1px solid blue; } div { margin:20px; outline:1px solid red; } </style> ``` This is the result and the problem: So far I've solved the problem by adding a `border:1px solid transparent;` property to the body element. This ruins the 100% height because scrollbars appear due to the `1px` border. Why does this happen? POSSIBLE SOLUTION (thanks for the help): Add a `padding-top:1px` and a `margin-top:-1px`, this way the 100% height doesn't gets ruined with the scrollbars and your are avoiding margin collapsing.