为什么iframe会在其元素下添加额外的空间?看看这个奇怪的行为:
.border {
background: red;
width: 300px;
height: 200px;
border: 1px solid green;
overflow: visible;
margin: 0;
padding: 0;
}
.border iframe {
border: none;
width: 300px;
height: 100px;
margin: 0;
padding: 0;
opacity: 0.8;
}
.border .lower {
height: 100px;
margin: 0;
padding: 0;
background: blue;
opacity: 0.8;
}
<div class="border">
<iframe src="https://example.com"></iframe>
<div class="lower"></div>
</div>
如何解决?
将display:block;
添加到您的iFrame样式中,如下所示:
.border iframe {
border: none;
width: 300px;
height: 100px;
margin: 0;
padding: 0;
opacity: 0.8;
display:block; /* Add this */
}
iFrame是一个内联框架,意味着它是一个内联元素,与img标签一样,可能会出现空白问题。在它上面设置display:block;
会将iFrame转换为块元素(如div),这将消除空白问题。
iframe
是一个内联元素。这会将HTML中的空格考虑在内。 display:inline-block
因困难而臭名昭着。
将display:block;
添加到iframe的CSS中。
对我的应用程序有用的是将overflow-y: hidden;
添加到iframe的html中。
最简单的方法是在iframe参数中添加“style =”display:block“”。
例如
<iframe width="100%" height="100%" frameborder="0" style="display:block"
src="https://www.url.com"></iframe>
iframe
元素是内联元素。修复间距问题的一种方法是添加display: block
,但您也可以通过简单地将vertical-align: bottom;
添加到iframe
元素来修复它。
这是另一个答案,请检查一下......
.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}