White space is still present around the iframe bor

2019-06-16 19:46发布

问题:

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.

回答1:

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


回答2:

Apply below to iframe

display: block


回答3:

try this:

  <iframe bgcolor=#FFFFFF frameborder=0 vspace=0 hspace=0 marginwidth=0 marginheight=0 width=100%
   height="340" 
   src="myframe.html">
 </iframe>


回答4:

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


回答5:

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.



回答6:

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]



回答7:

try this

<iframe src="....." style="position:absolute;"></iframe>


回答8:

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.