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

问题描述 投票:38回答:6

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

如何解决?

html css iframe
6个回答
73
投票

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


7
投票

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

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


0
投票

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


0
投票

最简单的方法是在iframe参数中添加“style =”display:block“”。

例如

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

-1
投票

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


-2
投票

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

.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}
© www.soinside.com 2019 - 2024. All rights reserved.