删除额外的空白周围的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:这里

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是内联元素