iframe with 0 height creates a gap

Question

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.

*, html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
iframe {
  margin: 0;
}
body {
  background: gray;
}

<iframe width="0" height="0" frameborder="0" scrolling="no" vspace="0" hspace="0" marginheight="0" marginwidth="0" src=""></iframe>
<div style="background: red;">TEST</div>

See the fiddle: http://jsfiddle.net/pLja65pc/1/

Answer 1

Iframe is an inline element so it will create a line box. The height of the line box will be equal to the line height (~18px for 16px font) or taller (if iframe is taller than font size).

Change the iframe to display: block and will create a block box with the desired height.

Answer 2

add display: block; to iframe

*, html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
iframe {
    margin: 0; 
    display: block;
}
body {
    background: gray;
}

<iframe width="0" height="0" frameborder="0" scrolling="no" vspace="0" hspace="0" marginheight="0" marginwidth="0" src=""></iframe>
<div style="background: red;">TEST</div>