Iframe在下方创造了额外的空间

Question

为什么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>

如何解决？

Answer 1

将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），这将消除空白问题。

Answer 2

iframe是一个内联元素。这会将HTML中的空格考虑在内。 display:inline-block以困难而臭名昭着。

将display:block;添加到iframe的CSS中。

Answer 3

在我的情况下，iframe正确放置在块中，并且宽度和高度均正确。 我将此应用到了iframe的容器上，它起作用了：

.iframe-container{
line-height:0px;
}

Answer 4

对我的应用程序有用的是将overflow-y: hidden;添加到iframe的html中。

Answer 5

最简单的方法是添加＆＃34; style =＆＃34; display：block＆＃34;＆＃34;在iframe params。

例如

    <iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>

Answer 6

在仅为移动设备或台式机进行设计时，其他答案也对我有用，但是当填充底部根据屏幕大小而有所不同时，则无法使用。

有效的方法是使用Viewport Height。

我将这些添加到了CSS中，它在所有决议中均解决了该问题。

.resp-iframe 
{
    height: 100vh;
    min-height: 800px;
}

Answer 7

将框架放入div，并使div与iframe高度相同

像这样：

<div style="height: 370px;">
    <iframe height="370"></iframe>
</div>

Answer 8

iframe元素是内联元素。解决间距问题的一种方法是添加display: block，但您也可以通过简单地将vertical-align: bottom;添加到iframe元素来解决此问题。

Answer 9

这是另一个答案，请检查一下......

.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}