title: <h1> tag causes space between header and top of page
body: <p>I am trying to make a webpage that looks at least a little decent, with a header and content and all, but I ran into a problem. I have this odd space between my header and the top of my page. After a while I found out the <code>&lt;h1&gt;</code> tag was the <em>culprit</em>. I want to have large text there, but don't know how without this odd problem popping up.</p>
  
  <p><strong>How can I keep the <code>&lt;h1&gt;</code> tag there, and remove the unwanted gap?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0px;
      height: 2000px;
      background-image: url(http://images6.alphacoders.com/334/334927.jpg);
      background-attachment: fixed;
  }
  #wrapper {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
  }
  #header {
      float: top;
      margin: auto;
      width: 100%;
      height: 70px;
      top: 0px;
      background: grey;
      box-shadow: 3px 5px 5px #555;
  }
  #content {
      background: white;
      width: 960px;
      margin: 20px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='wrapper'&gt;
      &lt;header&gt;
          &lt;div id='header'&gt;
               &lt;h1&gt;Lorem ipsum dolor sit amet&lt;/h1&gt; 
              &lt;!-- if you remove the h1 tags the header fits at the top !--&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;div id='content'&gt;
          &lt;div class='post'&gt;dsgsdfgsdfg&lt;/div&gt;
          &lt;div class='post'&gt;dsgsdfgsdfg&lt;/div&gt;
          &lt;div class='post'&gt;dsgsdfgsdfg&lt;/div&gt;
          &lt;div class='post'&gt;dsgsdfgsdfg&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>