iframe与0高度创建一个差距 [英] iframe with 0 height creates a gap

问题描述

当我将iframe添加到正文之后时，会导致顶部边距。有人可以解释这个吗？ iframe没有高度和边距。

  *，html，body {margin：0; padding：0; border：0;} iframe {margin：0;} body {background：gray;}  

 < iframe width =0height =0frameborder =0scrolling =novspace =0hspace =0marginheight =0marginwidth = src =>< / iframe>< div style =background：red;> TEST< / div>   
 
 
 
查看小提琴：
  http： //jsfiddle.net/pLja65pc/1/  
解决方案
 Iframe是一个内联元素，因此会创建一行框。线框的高度将等于线高度（对于16像素字体为〜18px）或更高（如果iframe高于字体大小）。
 
 
 
更改iframe到 display：block ，并创建一个具有所需高度的块框。
 
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/
解决方案
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.

                        
这篇关于iframe与0高度创建一个差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！