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

[Tested](http://jsfiddle.net/u82Qh/) 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.) — Brad Christie, Jul 18 '11 at 15:12
@BradChristie what should I do then? The iframes are just in my body tag. — Colin Atkinson, Jul 18 '11 at 15:17
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.) — Brad Christie, Jul 18 '11 at 15:21
Please post your html content, bit difficult to figure out [http://jsfiddle.net/yELzF/] — Marc Uberstein, Jul 18 '11 at 15:22

tw16 · Accepted Answer · 2011-07-18T15:42:17.383

79

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/

edited Jul 18 '11 at 15:42

answered Jul 18 '11 at 15:30

tw16

29,215
7
63
64

9

Did you try `display:block`. Because that should definitely fix the problem. – tw16 Jul 18 '11 at 15:39
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. – Colin Atkinson Jul 18 '11 at 15:42
3

I had the same problem without using `display:inline-block` but adding `display:block` like you said fixed it for me too :) – Maurice Feb 07 '12 at 11:27
Really helpful, thanks :) – Hernando Abella Mar 01 '22 at 00:53

score 17 · Answer 2 · answered Jun 02 '13 at 01:20

17

iframe { display:block; }

iframe is a inline element

answered Jun 02 '13 at 01:20

Sergio Rodrigues

171
1
2

score 16 · Answer 3 · answered Apr 17 '13 at 14:39

16

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;

answered Apr 17 '13 at 14:39

Jeff Clemens

912
9
17

Didn't help much for an iframe. – cst1992 Apr 03 '19 at 13:27

score 3 · Answer 4 · edited May 23 '17 at 12:34

3

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

edited May 23 '17 at 12:34

Community

1
1

answered Sep 18 '12 at 01:17

Tooma

31
1

score 3 · Answer 5 · answered Jul 18 '11 at 15:24

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.

score 3 · Answer 6 · edited Oct 26 '12 at 05:41

3

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>

edited Oct 26 '12 at 05:41

Prasad Jadhav

5,090
16
62
80

answered Feb 04 '12 at 12:56

dipankar

31
1

1

I closed this question a while ago. Also, why would that remotely help? – Colin Atkinson Feb 05 '12 at 00:55
1

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. – o_O Jul 24 '12 at 15:34
In my case it did help, though I'm not sure why – yitwail Jun 03 '13 at 00:23

score 2 · Answer 7 · answered Mar 10 '16 at 17:53

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

answered Mar 10 '16 at 17:53

1

It would be helpful if you explained what you changed and why it works. – Adam Katz Mar 10 '16 at 18:00
This is why it's ok to add to old questions: the explanation of adding `float:left;` – freedomn-m Jul 21 '17 at 08:36

score 2 · Answer 8 · answered Sep 04 '18 at 08:42

2

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

answered Sep 04 '18 at 08:42

Leander

340
3
14

This is what fixed it for me. marginwidth and marginheight to "0". – mathewguest Nov 26 '21 at 18:07

score 0 · Answer 9 · answered Jan 21 '20 at 12:34

0

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

answered Jan 21 '20 at 12:34

David Clews

795
6
14

score -2 · Answer 10 · answered Jul 18 '11 at 15:09

-2

Try html, body {margin:0px;}

answered Jul 18 '11 at 15:09

Caroline Elisa

1,246
6
18
35

Remove the Extra Whitespace Surrounding Iframes?

10 Answers10

Linked