title: Strange extra spacing between header and body when extra element is added
body: <p>I have the following HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;h2&gt;Title&lt;/h2&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>With the following CSS</p>
  
  <pre><code>html {
      height: 100%;
  }
  
  body {
      height: 100%;
      margin: 0;
  }
  
  header {
      float: left;
      background: black;
      height: 100%;
      width: 150px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ZqeED/1/" rel="nofollow">http://jsfiddle.net/ZqeED/1/</a></p>
  
  <p>IE10, Chrome 26, and Firefox 20 all show unwanted extra space at the top, as well as a scroll bar.</p>
  
  <p>Removing the h2 element causes this space to disappear.</p>
  
  <p>My question is, what is going on? Is there an HTML layout rule which explains why the space is being added?</p>