Iframe creates extra space below

Question

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

.border {
    background: red;
    width: 300px;
    height: 200px;
    border: 1px solid green;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
}

.border .lower {
    height: 100px;
    margin: 0;
    padding: 0;
    background: blue;
    opacity: 0.8;
}

<div class="border">
  <iframe src="https://example.com"></iframe>
  <div class="lower"></div>
</div>

How to work around?

Answer 1

What worked for my app, was adding overflow-y: hidden; to the html of the iframe.

Answer 2

here is another answer please check it ...

.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}

Answer 3

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 4

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>

Answer 5

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 6

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.