删除额外的空白周围的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上都testing过，结果是一样的。 我四处搜寻，找不到任何东西。 Chrome控制台中也没有显示这个空格。 另外，我已经有了以下CSS：

 html, body { margin: 0px; padding: 0px; border: 0px; width: 100%; height: 100%; } 

JSFiddle： 这里

Answer 1

刚刚看到你的小提琴问题是因为你正在使用display:inline-block 。 这将考虑到您的html中的空白。 display:inline-block由于难以浏览器支持而臭名昭着。

选项1：尝试删除您的HTML中的空白有时可以sorting问题。

选项2：使用不同的显示属性（如display:block将确定sorting问题。 现场示例： 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

Answer 5

我有同样的问题，我通过浮动帧元素来解决它

 iframe { margin: none; padding: none; border: none; line-height: 0; float: left; } 

Answer 6

尝试使用带overflow: hidden;的div overflow: 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> 

Answer 7

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

Answer 8

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