Iframe creates extra space below

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?

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.

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.

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

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>

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.

The other answers worked for me when designing for just mobile or just desktop, but when the padding-bottom would have been different based on the size of the screen, it did not work.

What does work is using Viewport Height.

I added these to my CSS and it resolved the issue in all resolutions.

.resp-iframe 
{
    height: 100vh;
    min-height: 800px;
}

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

like this:

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

02 2022 (Bootstrap 5.1)

I thought I will contribute to this question by using CSS and also with Bootstrap 5.1
I will be using Google Map as an example.

on iFrame

CSS method: you can use display:block in the style attribute

                                                                   ↓                             
                                                              -------------                      
<iframe src="SOURCE" width="600" height="450" style="border:0;display:block" allowfullscreen=""
loading="lazy"></iframe>

Bootstrap method: use d-block class

                                                                      ↓                             
                                                                ------------- 
<iframe src="SOURCE" width="600" height="450" style="border:0;" class="d-block" allowfullscreen=""
loading="lazy"></iframe>

on iFrame Parent

CSS method: If you wrap with a div you can use line-height:0 to your parent element.

                 ↓
            -------------
<div style="line-height:0">
  <iframe src="SOURCE" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

Boostrap method: Speaking of line-height, bootstrap has four line-height classes lh-1, lh-sm, lh-base, lh-lg they are good for text but unfortunately they don't work on iframe. Also adding d-block to the parent doesn't work instead, you can use d-block on the iframe just like CSS.

<div>
                                                                             ↓
                                                                       -------------
    <iframe src="SOURCE_HERE" width="600" height="450" style="border:0;display:block" allowfullscreen="" 
loading="lazy"></iframe>
</div>

Fixed Parent height

If your parent height is fixed then you can set the iframe to height="100%" which will expand the iframe height to match with your parent

.parent{
    height: 500px;
}

<div class="parent">
                                                   ↓
                                                 ------
    <iframe src="SOURCE_HERE" width="600" height="100%" style="border:0" allowfullscreen="" loading="lazy"></iframe>
</div>

No access to the iframe element

If you do not have control of your iframe element then you can set your parent height to match with the iframe height.

.parent{
    height: 450px;
}

<div class="parent">
                                                   ↓
                                                 -----
    <iframe src="SOURCE_HERE" width="600" height="450" style="border:0;display:block" allowfullscreen="" loading="lazy"></iframe>
</div>

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

here is another answer please check it ...

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