Colin Atkinson Colin Atkinson - 7 months ago 28
HTML Question

Remove the Extra Whitespace Surrounding Iframes?

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

Answer

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/