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