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

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

iframe { display:block; }

iframe is a inline element

Answer 3

Try html, body {margin:0px;}

Answer 4

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;

Answer 5

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 6

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>