9

Even After setting the frameborder attribute in the iframe to 0 there is still some white space present around the iframe border (unlike the original url/link page). Is there any other way to get rid of the white space or some white must be presented around the iframe as it is within the webpage (or part of it) and it cannot be the whole page? Thank you.

Ata Iravani
  • 2,146
  • 7
  • 29
  • 40
Muaz
  • 195
  • 2
  • 2
  • 11
  • Can you post your iframe code, and the styles you're applying to the document inside the iframe? At a guess, I'd say you need to set the padding on the contained document's `body` to 0, but it's a guess in the absense of information. :-) – T.J. Crowder Oct 26 '10 at 08:52
  • Y it seems so, and already resolved it. Thanks for the help – Muaz Oct 26 '10 at 09:05

8 Answers8

13

Maybe that whitespace is actually the outside margin of the document loaded in the <iframe>. Try styling the loaded document with:

html, body {
    border: 0px;
    margin: 0px;
    padding: 0px;
}
Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • Thank you. I think what you said is true, I used the code you wrote and it worked for me. Thanks for the answer. – Muaz Oct 26 '10 at 09:03
  • 1
    Man! You solved a problem! I have my code which was giving me an issue like this and used your suggestion. You saved the day Frederic! – KPO Nov 21 '12 at 13:21
9

Apply below to iframe

display: block
Nagavardhan Raju
  • 91
  • 1
  • 2
1

By adding this CSS we can make iframe in full screen

body,html
{
    background-color:#DDEEDD;
    padding:0px;
    margin:0px;
    height:100%;
    width:100%;
    overflow:hidden;
}
iframe
{
    margin:0;
    padding:0;
    border:none;
    overflow:hidden;
    background-color:#DDEEDD;
}
Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
Prem Kumar Maurya
  • 457
  • 4
  • 11
  • Some unnecessary duplication, right? The iframe could as well be after html and the iframe section removed. Anyway, this was the only one of the suggestions that worked for me, so thanks! – Meaningful Username Nov 11 '14 at 10:15
0

Simply add style="margin: 0 0 0 0" inside <iframe > tag.

example:

<iframe src="http://www.yahoo.com" style="margin: 0 0 0 0"></iframe>

If you want margin, you must add 'px' after number

(Thanks to "Inspect Element" tool of Safari Browser) this solved my solution.

Mohammad
  • 1
0

Frederic's proposal solved my problem: howto get rid off the white border in a fullscreen slideshow for safari browser. Perfect! Many thanks, wimsch [Since I couldn't add a comment on his answer [[< 50]]: I put it here to let him know my gratitude]

user2317959
  • 71
  • 1
  • 1
  • 6
0

try this

<iframe src="....." style="position:absolute;"></iframe>
jack
  • 1
0

I ran into a similar problem: I had the iframe inside a figure tag, and there was some white space between the iframe and the figcaption element.

<figure>
  <iframe></iframe>
  <!-- white space was here -->
  <figcaption></figcaption>
</figure>

In my case simply adding iframe { display:block } solved the issue.

Giorgio Tempesta
  • 1,816
  • 24
  • 32
0

try this:

  <iframe bgcolor=#FFFFFF frameborder=0 vspace=0 hspace=0 marginwidth=0 marginheight=0 width=100%
   height="340" 
   src="myframe.html">
 </iframe>
heximal
  • 10,327
  • 5
  • 46
  • 69
  • This, along with the above mentioned html, body{} attributes - AS WELL as utilizing scrolling="auto" - solved a 10 pixel padding that seemed to be added to the bottom of the iframe containing the image. This added space was causing the vertical scroll-bar to unwantingly appear using Firefox. I was trying to take advantage of Firefox's auto re-size and zoom feature when you are pointing the browser to an image alone. When you try this in an iframe - it was adding extra space to the bottom of the image - or the iframe itself was like cropping the image. –  Dec 28 '12 at 19:50
  • The final iframe settings I used to get rid of the vertical scroll-bar was: –  Dec 28 '12 at 19:51
  • Your answer in above comment worked for me after panting through the net for iframes. – prakash_d22 Jan 14 '13 at 13:38