删除额外的空白周围的iframe？ [英] Remove the Extra Whitespace Surrounding Iframes?

问题描述

我在页面中使用iframe，并且偶然发现了一个奇怪的问题。我设置iframe css就像这样

  iframe {
 margin：none; 
 padding：none; 
背景：蓝色; / *这只是为了使框架更容易看到* / 
 border：none; 
} 
  

但是，iframe中仍然有空白。我在Chrome和Firefox上测试过它，它也是一样的。我四处搜寻，找不到任何东西。 Chrome空间不会显示该空白。
另外，我已经有了以下CSS：

  html，body {
 margin：0px ; 
 padding：0px; 
 border：0px; 
宽度：100％; 
身高：100％; 
} 
  

JSFiddle： here

刚刚看过你的小提琴你的问题是因为你正在使用 display：inline-block 。这将考虑到html中的空白。 display：inline-block 由于难以浏览并且浏览器支持不佳而出了名。

选项1：
尝试删除html中的空格有时可以对问题进行排序。

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

I am using iframes in my page, and have stumbled across a weird issue. I set the iframe css like so

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:

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

JSFiddle: here

解决方案

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-block is notorious for being difficult and has dodgy browser support.

Option 1: Try removing the white space in your html can sometimes sort the problem.

Option 2: Using a different display property such as display:block will definitely sort the problem. Live example: http://jsfiddle.net/mM6AB/3/

这篇关于删除额外的空白周围的iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！