Remove the Extra Whitespace Surrounding Iframes?

Solution 1:

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/

Solution 2:

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;

Solution 3:

iframe { display:block; }

iframe is a inline element

Solution 4:

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