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: