Colin Atkinson Colin Atkinson - 9 months ago 60
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


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: