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

Incriminate

Tested on chrome, IE and FF (on my end) can not visibly see a border. It's probably the container it's in. (I know I set a size, but my anticipation is that an iframe's margin would expand its parent to accommodate--no such outcome.) – Furtado

@BradChristie what should I do then? The iframes are just in my body tag. – Incriminate

Can you make a jsfiddle duplicating exactly what you have? (Place the entire html source in the top left window and click save and provide that link.) – Furtado

Please post your html content, bit difficult to figure out [jsfiddle.net/yELzF/] – Psalmbook

Answer 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/

Chough

Did you try display:block. Because that should definitely fix the problem. – Chough

yes it does for me in Chrome, too! I don't know why that works, but it does! Can you put that as an answer, so I can mark it as correct? I also had to remove the DOCTYPE, but that's fine. – Incriminate

I had the same problem without using display:inline-block but adding display:block like you said fixed it for me too :) – Lierne

Really helpful, thanks :) – Abstemious

Answer 2

iframe { display:block; }

iframe is a inline element

Glowworm

Answer 3

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;

Benzofuran

Didn't help much for an iframe. – Relativize

Answer 4

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.

Psalmbook

Answer 5

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>

Claustral

I closed this question a while ago. Also, why would that remotely help? – Incriminate

What he's saying is that in times when you have an iFrame that is specifically set to 300px, but the browser is rendering it with a 4px border, you can set the parent div to 300px and the it is now impossible for the border to show on the iFrame. – Anytime

In my case it did help, though I'm not sure why – Doering

Answer 6

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

Weirdo

Answer 7

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

Adze

It would be helpful if you explained what you changed and why it works. – Whalebone

This is why it's ok to add to old questions: the explanation of adding float:left; – Stricker

float: left; did the trick. – Lightface

Answer 8

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...

Rowen

This is what fixed it for me. marginwidth and marginheight to "0". – Bud

Answer 9

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

Alfons

Answer 10

You have to do it on the page that you call, not in the iframe.

<iframe src=test.html></iframe> 

Then in test.html, only margin:0 is sufficient.

body { margin: 0}

Docia

Answer 11

Try html, body {margin:0px;}

Mooring