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:         


        

Answer 1

Bit difficult to solve without your html content, but give this a try:

iframe {
    margin: 0px !important;
    padding: 0px !important;
    background: blue; /* this is just to make the frames easier to see */
    border: 0px !important;
}

html, body {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100%;
    height: 100%;
}

Adding the !important will force the style, coz my guess is that your styles are overwriting each other.

Answer 2

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; 
}

Answer 3

The problem is line-height setting, try adding line-height: 0; to the iframe container.

Answer 4

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/