title: iframe with 0 height creates a gap
body: <p>When I add an iframe to directly after the body, it causes a top margin. Can somebody explain this please? The iframe has no height and no margin.</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>*, html, body {
    margin: 0;
    padding: 0;
    border: 0;
  }
  iframe {
    margin: 0;
  }
  body {
    background: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iframe width="0" height="0" frameborder="0" scrolling="no" vspace="0" hspace="0" marginheight="0" marginwidth="0" src=""&gt;&lt;/iframe&gt;
  &lt;div style="background: red;"&gt;TEST&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>See the fiddle:
  <a href="http://jsfiddle.net/pLja65pc/1/" rel="nofollow">http://jsfiddle.net/pLja65pc/1/</a></p>