为什么 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 变成 block 元素(如 div),这将消除空白问题。
关于html - iframe 在下方创建额外的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21025319/