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/