删除额外的空白周围的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：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;的<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>

Answer 8

既然没有一个给定的答案为我提供了解决方案（我在实现iFrame时偶然发现了奇怪的边缘问题）我发现这个工作正常：

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

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

Answer 9

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