删除围绕 iframe 的额外空白？答案

【问题标题】：Remove the Extra Whitespace Surrounding Iframes?删除围绕 iframe 的额外空白？
【发布时间】：2011-10-07 18:43:40
【问题描述】：

我在我的页面中使用 iframe，并且偶然发现了一个奇怪的问题。我像这样设置iframe css

iframe {
    margin: none;
    padding: none;
    background: blue; /* this is just to make the frames easier to see */
    border: none;
}

但是，iframe 周围仍有空白。我在 Chrome 和 Firefox 中都测试过，结果是一样的。我四处寻找，我找不到任何东西。这个空格也不会出现在 Chrome 控制台中。另外，我也已经有了以下 CSS：

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}

JSFiddle：here

【问题讨论】：

Tested 在 chrome、IE 和 FF（在我这端）上看不到边框。它可能是它所在的容器。（我知道我设置了一个大小，但我的预期是 iframe 的边距会扩大其父级以适应 - 没有这样的结果。）
@BradChristie 那我该怎么办？ iframe 就在我的 body 标签中。
你能制作一个 jsfiddle 复制你所拥有的吗？（将整个 html 源代码放在左上角的窗口中，然后单击保存并提供该链接。）
请发布您的html内容，有点难以弄清楚[jsfiddle.net/yELzF/]

标签： html css iframe whitespace removing-whitespace

【解决方案1】：

刚刚看到您的小提琴，您的问题是因为您使用的是display:inline-block。这会将您的 html 中的空格考虑在内。 display:inline-block 是出了名的难，并且有不可靠的浏览器支持。

选项 1： 尝试删除 html 中的空白有时可以解决问题。

选项 2： 使用不同的显示属性（例如display:block）肯定会解决问题。实例：http://jsfiddle.net/mM6AB/3/

【讨论】：

你试过display:block。因为那肯定可以解决问题。
是的，它在 Chrome 中也适用于我！我不知道为什么会这样，但确实如此！您可以将其作为答案，以便我将其标记为正确吗？我还必须删除 DOCTYPE，但这很好。
我没有使用display:inline-block，但添加了display:block，就像你说的那样，我也遇到了同样的问题：)

【解决方案2】：

当您使用内联元素时，空格可能来自元素所在的“行”（即基线下方的空间）。然后解决方案是将其添加到其父元素中。

line-height: 0;

【讨论】：

对 iframe 帮助不大。

【解决方案3】：

iframe { display:block; }

iframe 是一个内联元素

【讨论】：

【解决方案4】：

也许那个空白实际上是加载到 .尝试对加载的文档进行样式设置（源页面的 CSS 样式）：

html, body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

引用自 stackoverflow.com Here

【讨论】：

【解决方案5】：

尝试使用overflow: hidden; 包围<iframe> 的div，例如

<div style="height: 29px; overflow: hidden;">
   <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30">
      <p>Your browser does not support iframes.</p>
   </iframe>
</div>

【讨论】：

我不久前关闭了这个问题。另外，为什么远程会有帮助？
他的意思是，当您有一个专门设置为 300px 的 iFrame，但浏览器使用 4px 边框呈现它时，您可以将父 div 设置为 300px，它是现在边框无法在 iFrame 上显示。
对我来说确实有帮助，虽然我不知道为什么

【解决方案6】：

如果没有你的 html 内容有点难以解决，但试试这个：

iframe {
    margin: 0px !important;
    padding: 0px !important;
    background: blue; /* this is just to make the frames easier to see */
    border: 0px !important;
}

html, body {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100%;
    height: 100%;
}

添加!important 将强制使用样式，因为我猜你的样式会相互覆盖。

【讨论】：

【解决方案7】：

我遇到了同样的问题，我通过浮动框架元素来解决它

iframe {

    margin: none;
    padding: none;
    border: none;
    line-height: 0;
    float: left; 
}

【讨论】：

如果您能解释一下您所做的更改以及更改的原因，将会很有帮助。
老问题加这个就ok了：加float:left;的解释

【解决方案8】：

由于给定的答案都没有为我提供解决方案（我在实现 iFrame 时也偶然发现了奇怪的边距问题），我发现这工作正常：

<iframe frameborder="0" marginwidth="0" marginheight="0" src="/something"></iframe>

marginwidth 和 marginheight 无效/官方支持的 HTML5 标记，但它们在我的测试中工作得很好......

【讨论】：

这是为我解决的问题。边距宽度和边距高度为“0”。

【解决方案9】：

问题是行高设置，尝试将line-height: 0;添加到iframe容器中。

【讨论】：

【解决方案10】：

试试html, body {margin:0px;}

【讨论】：