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

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 Here

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将强制风格，因为我的猜测是你的风格相互覆盖。

Answer 7

尝试使用围绕overflow: hidden;的{{1}}的div，例如

<iframe>

Answer 8

由于没有给出的答案为我提供了解决方案（在实施iFrame时，我也偶然发现了奇怪的保证金问题），因此我发现这很好用：

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

marginwidth 和 marginheight 无效/官方支持的HTML5-标记，但在我的测试中效果很好...

Answer 9

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

Answer 10

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

删除额外的空白周围的iframe？

10 个答案: