html - 高度为 0 的 iframe 会产生间隙

Question

当我直接在正文之后添加 iframe 时，它​​会导致上边距。有人可以解释一下吗？ iframe 没有高度和边距。

*, 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>

参见 fiddle : http://jsfiddle.net/pLja65pc/1/

Answer 1

iframe 是一个内联元素，所以它会创建一个行框。行框的高度将等于行高(对于 16 像素的字体约为 18 像素)或更高(如果 iframe 的高度大于字体大小)。

将 iframe 更改为 display: block 并将创建一个具有所需高度的 block 框。