Iframe creates extra space below

Question

Why does an iframe add extra space under its element? Look at this weird behavior:

相关标签:

Answer 1

iframe is an inline element. This takes whitespace in your HTML into account. display:inline-block is notorious for being difficult.

Add display:block; to the CSS for your iframe.

Answer 2

Put the frame in div and make div same height of an iframe

like this:

<div style="height: 370px;">
    <iframe height="370"></iframe>
</div>

Answer 3

Add display:block; to your Iframe style like so:

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    display:block; /* Add this */
}

Iframe is an Inline Frame, meaning that it is an inline element, which like the img tag, can have issues with whitespace. Setting display:block; on it turns the Iframe into a block element (like a div), which will remove the whitespace issue.

Answer 4

The iframe element is an inline element. One way of fixing the spacing issue is adding display: block, but you can also fix it by simply adding vertical-align: bottom; to the iframe element.

Answer 5

In my case the iframe was correctly in a block and size width and height were both corrects. I applied this to the container of my iframe and it worked :

.iframe-container{
line-height:0px;
}

Answer 6

The easiest way to do this is to just add "style="display:block"" in the iframe params.

for example

    <iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>