54

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

4

10 回答 10

78

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

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

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

于 2011-07-18T15:30:07.517 回答
16

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

line-height: 0;
于 2013-04-17T14:39:06.403 回答
13 
iframe { display:block; }

iframe 是一个内联元素

于 2013-06-02T01:20:50.963 回答
3

尝试使用 divoverflow: 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>
于 2012-02-04T12:56:21.597 回答
3

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

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

引用自 stackoverflow.com这里

于 2012-09-18T01:17:19.773 回答
2

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

于 2011-07-18T15:24:25.247 回答
2

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

iframe {

    margin: none;
    padding: none;
    border: none;
    line-height: 0;
    float: left; 
}
于 2016-03-10T17:53:13.130 回答
2

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

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

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

于 2018-09-04T08:42:58.587 回答
0

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

于 2020-01-21T12:34:56.410 回答
-2

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

于 2011-07-18T15:09:03.243 回答