html自动删除多余的空格,html-删除多余的空白环绕iframe？

html-删除多余的空白环绕iframe？

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

9个解决方案

67 votes

刚刚看到您的小提琴是您的问题，因为您使用的是display:block。这将html中的空格考虑在内。 display:inline-block因难以处理而臭名昭著，并且拥有模糊的浏览器支持。

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

选项2：使用不同的显示属性(例如display:block)肯定会解决问题。 实时示例：[http://jsfiddle.net/mM6AB/3/]

tw16 answered 2020-02-14T12:20:30Z

15 votes

当您使用嵌入式元素时，空格可能来自该元素所属的“线”(即基线下方的空间)。 解决方案是将其添加到其父元素。

line-height: 0;

Jeff Clemens answered 2020-02-14T12:20:51Z

9 votes

iframe { display:block; }

iframe是内联元素

Sergio Rodrigues answered 2020-02-14T12:21:11Z

3 votes

也许空白实际上是加载到中的文档的外边距。 尝试使用以下方式对加载的文档进行样式化(对源页面进行CSS样式化)：

html, body {

border: 0px;

margin: 0px;

padding: 0px;

}

引用从stackoverflow.com这里

Tooma answered 2020-02-14T12:21:36Z

2 votes

我有同样的问题，我通过浮动框架元素解决了

iframe {

margin: none;

padding: none;

border: none;

line-height: 0;

float: left;

}

answered 2020-02-14T12:21:56Z

1 votes

没有您的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将强制样式，这是因为您的样式相互覆盖。

Marc Uberstein answered 2020-02-14T12:22:21Z

1 votes

尝试在周围使用带有overflow: hidden;的div，例如

Your browser does not support iframes.

dipankar answered 2020-02-14T12:22:41Z

0 votes

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

marginwidth和marginheight无效/官方支持的HTML5-标签，但在我的测试中它们可以正常工作...

Leander answered 2020-02-14T12:23:05Z

-2 votes

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

Caroline Elisa answered 2020-02-14T12:23:25Z