title: Body tag non behaving normally
body: <p>I have a <code>body</code> tag in my HTML which should fill the whole page (the whole <code>html</code> tag so), but it appears with some pixels between the top of the page and the top of the <code>body</code> tag.</p>
  
  <p>Strange thing is that if I force <code>body {padding: 0;}</code> in my CSS, there's still this little bar at the top of the page which <code>body</code> doesn't manage to fill, while if I set <code>padding</code> to any non-zero value that little bar gets covered by <code>body</code> and the specified padding is applied.</p>
  
  <p>This is my trivial CSS (which styles a <code>body</code> HTML tag filled with <code>div</code>s and ordinary stuff):</p>
  
  <pre><code>html {
      height: 100%;
      margin: 0;
      padding: 0; // this is ok, html fills the whole page
  }
  
  body {
      margin: 0;
      height: 100%;
      padding-top: 1px; // here, if I write padding:0;, space at the top will not be filled by body
  } 
  </code></pre>
  
  <h3>Edit</h3>
  
  <p>Here's my HTML, I don't know if it can be useful.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
  
      &lt;header id="page_header"&gt;
          stuff
      &lt;/header&gt;
  
      &lt;section id="page_content"&gt;
          stuff
      &lt;/section&gt;    
  
      &lt;footer id="page_footer"&gt;
          stuff
      &lt;/footer&gt;
  
      &lt;/div&gt; &lt;!-- end of div#container --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Note</strong>: I'm working with both Firefox and Chrome, same behavior.</p>