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

iframe { display:block; }

iframe 是一个内联元素

Answer 3

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

line-height: 0;

Answer 4

如果没有 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 将强制使用样式，因为我的猜测是您的样式正在相互覆盖。

Answer 5

我遇到了同样的问题，我通过浮动框架元素修复了它

iframe {

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

Answer 6

也许该空白实际上是加载到 .txt 文件中的文档的外边距。尝试使用以下方式对加载的文档进行样式设置（对 源页面进行 CSS 样式设置）：

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

引用自 stackoverflow.com 此处

Answer 7

尝试在 周围使用 overflow:hidden; 的 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>

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

您必须在您调用的页面上执行此操作，而不是在 iframe 中。

<iframe src=test.html></iframe> 

然后在 test.html 中，只需 margin:0 就足够了。

body { margin: 0}

Answer 11

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