Remove the Extra Whitespace Surrounding Iframes?
HtmlCssIframeWhitespaceRemoving WhitespaceHtml Problem Overview
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][1]
[1]: http://jsfiddle.net/mM6AB/1/ "JSFiddle"
Html Solutions
Solution 1 - Html
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 - Html
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 - Html
iframe { display:block; }
iframe is a inline element
Solution 4 - Html
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>
Solution 5 - Html
Maybe that whitespace is actually the outside margin of the document loaded in the
Solution 6 - Html
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.
Solution 7 - Html
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;
}
Solution 8 - Html
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...
Solution 9 - Html
The problem is line-height setting, try adding line-height: 0;
to the iframe container.
Solution 10 - Html
Try html, body {margin:0px;}