Iframe在下面创建额外的空间 [英] Iframe creates extra space below

问题描述

为什么iframe在其元素下添加额外空间？看看这种奇怪的行为：

$ b

  .border {background：red;宽度：300px; height：200px;边框：1px纯绿色;溢出：可见;保证金：0; padding：0;}。border iframe {border：none;宽度：300px; height：100px;保证金：0;填充：0; opacity：0.8;}。border .lower {height：100px;保证金：0;填充：0;背景：蓝色; opacity：0.8;}  

< div class =border > < iframe src =https://example.com>< / iframe> < div class =lower>< / div>< / div>

如何

解决方案

在您的iFrame风格中添加 display：block; 像这样：

  .border iframe {
 border：none; 
 width：300px; 
 height：100px; 
保证金：0; 
 padding：0; 
不透明度：0.8; 
 display：block; / *添加这个* / 
} 
  

iFrame是一个Inline Frame，意思是它像img标签一样的内联元素可能会产生空白问题。设置 display：block; 就可以将iFrame变成一个块元素（比如div），这将消除空白问题。

Why does an iframe add extra space under its element? Look at this weird behavior:

.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>

How to work around?

解决方案

Add display:block; to your iFrame style like so:

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    display:block; /* Add this */
}

iFrame is an Inline Frame, meaning that it is an inline element, which like the img tag, can have issues with whitespace. Setting display:block; on it turns the iFrame into a block element (like a div), which will remove the whitespace issue.

这篇关于Iframe在下面创建额外的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！