title: CSS margin pushing the body element
body: <p>I'm setting a margin for a div element, however the body element also gets that margin.</p>
  
  <p>Consider this code:</p>
  
  <pre><code>&lt;!-- HTML --&gt;
  &lt;body&gt;
    &lt;div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;!-- CSS --&gt;
  &lt;style&gt;
    html,body {
     height:100%;
     margin:0;
     padding:0;
     outline:1px solid blue;
    }
  
   div {
     margin:20px;
     outline:1px solid red;
   }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>This is the result and the problem: 
  <img src="https://i.stack.imgur.com/mhoAu.jpg" alt="http://i54.tinypic.com/29ve1zl.jpg"></p>
  
  <p>So far I've solved the problem by adding a <code>border:1px solid transparent;</code> property to the body element. This ruins the 100% height because scrollbars appear due to the <code>1px</code> border. Why does this happen?</p>
  
  <p><strong>POSSIBLE SOLUTION</strong> (thanks for the help): Add a <code>padding-top:1px</code> and a <code>margin-top:-1px</code>, this way the 100% height doesn't gets ruined with the scrollbars and your are avoiding margin collapsing.</p>