删除围绕 iframe 的额外空白？

Question

我在我的页面中使用 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：这里

Answer 1

刚刚看到你的小提琴你的问题是因为你正在使用display:inline-block 。 这会将 html 中的空格考虑在内。 display:inline-block以困难而臭名昭著，并且具有不可靠的浏览器支持。

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

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

Answer 2

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

line-height: 0;

Answer 3

iframe { display:block; }

iframe 是内联元素

Answer 4

也许那个空白实际上是加载的文档的外边距。 尝试使用以下方式设置加载文档的样式（CSS 样式源页面）：

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

引用自stackoverflow.com 这里

Answer 5

我有同样的问题，我通过浮动框架元素来修复它

iframe {

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

Answer 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将强制样式，因为我猜你的 styles 正在相互覆盖。

Answer 7

尝试使用带有overflow: hidden; 围绕<iframe> ，例如

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

Answer 8

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

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

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

Answer 9

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

Answer 10

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