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

Maybe that whitespace is actually the outside margin of the document loaded in the . Try styling the loaded document (CSS styling the source page) with:

html, body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

quoted from stackoverflow.com Here

Answer 2

try using a div with overflow: hidden; surrounding the <iframe>, like

<div style="height: 29px; overflow: hidden;">
   <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30">
      <p>Your browser does not support iframes.</p>
   </iframe>
</div>

Answer 3

Try html, body {margin:0px;}

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/

Answer 5

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 6

When you are using an inline element, the whitespace might be from the "line" the element is part of (ie. the space below the baseline). The solution then is to add this to its parent element.

line-height: 0;