Remove the Extra Whitespace Surrounding Iframes?

Question

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 1

Since none of the given answers provided a solution for me (I also stumbled across the weird margin issue when implementing an iFrame) I found this to be working fine:

<iframe frameborder="0" marginwidth="0" marginheight="0" src="/something"></iframe>

marginwidth and marginheight are not valid / officially supported HTML5-tags but they work just fine in my tests...

Answer 2

iframe { display:block; }

iframe is a inline element

Answer 3

I had the same problem and i fixed it by floating the frame element

iframe {

    margin: none;
    padding: none;
    border: none;
    line-height: 0;
    float: left; 
}