Html 删除围绕 iframe 的额外空白？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6735022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove the Extra Whitespace Surrounding Iframes?
提问by Colin Atkinson
I am using iframes in my page, and have stumbled across a weird issue. I set the iframe css like so
我在我的页面中使用 iframe，并且偶然发现了一个奇怪的问题。我像这样设置 iframe css
iframe {
margin: none;
padding: none;
background: blue; /* this is just to make the frames easier to see */
border: none;
}
However, there is still whitespace surrounding the iframe. I tested it in both Chrome and Firefox, and it's the same. I searched around, and I couldn't find anything. This whitespace doesn't show up in the Chrome console, either. Also, I already have the following CSS as well:
但是，iframe 周围仍然有空白。我在 Chrome 和 Firefox 上都测试过，结果是一样的。我四处寻找，没有找到任何东西。这个空白也不会出现在 Chrome 控制台中。另外，我也已经有了以下 CSS：
html, body {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
}
JSFiddle: here
JSFiddle：这里
回答by tw16
Having just seen your fiddle your issue is because you are using display:inline-block. This takes whitespace in your html into account. display:inline-blockis notorious for being difficult and has dodgy browser support.
刚刚看到你的小提琴你的问题是因为你正在使用display:inline-block. 这会将 html 中的空格考虑在内。display:inline-block臭名昭著的困难和狡猾的浏览器支持。
Option 1:Try removing the white space in your html can sometimes sort the problem.
选项 1：尝试删除 html 中的空白有时可以解决问题。
Option 2:Using a different display property such as display:blockwill definitely sort the problem. Live example: http://jsfiddle.net/mM6AB/3/
选项 2：使用不同的显示属性，例如display:block肯定会解决问题。现场示例：http: //jsfiddle.net/mM6AB/3/
回答by Jeff Clemens
When you are using an inline element, the whitespace might be from the "line" the element is part of (ie. the space below the baseline). The solution then is to add this to its parent element.
当您使用内联元素时，空格可能来自元素所属的“行”（即基线下方的空间）。解决方案是将其添加到其父元素中。
line-height: 0;
回答by Sergio Rodrigues
iframe { display:block; }
iframe is a inline element
iframe 是一个内联元素
回答by Tooma
Maybe that whitespace is actually the outside margin of the document loaded in the . Try styling the loaded document (CSS styling the source page) with:
也许那个空白实际上是加载到 . 尝试使用以下方式设置加载的文档样式（CSS 样式源页面）：
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
quoted from stackoverflow.com Here
引用自 stackoverflow.com这里
回答by Tooma
I had the same problem and i fixed it by floating the frame element
我遇到了同样的问题，我通过浮动框架元素来修复它
iframe {
margin: none;
padding: none;
border: none;
line-height: 0;
float: left;
}
回答by dipankar
try using a div with overflow: hidden;surrounding the <iframe>, like
尝试使用 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>
回答by Leander
Since none of the given answers provided a solution for me (I also stumbled across the weird margin issue when implementing an iFrame) I found this to be working fine:
由于没有给定的答案为我提供解决方案（我在实现 iFrame 时也偶然发现了奇怪的边距问题），我发现这工作正常：
<iframe frameborder="0" marginwidth="0" marginheight="0" src="/something"></iframe>
marginwidthand marginheightare not valid / officially supported HTML5-tags but they work just fine in my tests...
marginwidth和marginheight无效/官方支持的 HTML5 标签，但它们在我的测试中工作得很好......
回答by Marc Uberstein
Bit difficult to solve without your html content, but give this a try:
没有你的 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%;
}
Adding the !importantwill force the style, coz my guess is that your styles are overwriting each other.
添加!important将强制样式，因为我的猜测是您的样式正在相互覆盖。
回答by David Clews
The problem is line-height setting, try adding line-height: 0;to the iframe container.
问题是 line-height 设置，尝试添加line-height: 0;到 iframe 容器中。
回答by Caroline Elisa
Try html, body {margin:0px;}
尝试 html, body {margin:0px;}
