62

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?

13 Answers 13

146

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.

3
  • 25
    Well that was a fun three hours.
    – detly
    Apr 23, 2018 at 12:09
  • 1
    For those coming across this now, the iFrame must have a fixed width, width: 100% does not work to close the gap within the iFrame and the <body>. Jun 26, 2019 at 23:43
  • @BrandonFranklin is there a way to fix this while maintaining a dynamic 100% width?
    – bd33
    Jan 24, 2020 at 19:46
10

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.

0
6

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.

0
4

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

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>
0
1

Placing the <iframe> inside a container with display: flex and removing the border from the <iframe> with border: 0 also seems to work:

/* doesn't work */
.container {
  border: 1px solid black;
  height: 100%;
}

.container iframe {
  height: 100%;
}

/* works */
.container-flex {
  margin-top: 50px;
  display: flex;
  border: 1px solid black;
}

.container-flex iframe {
  border: 0;
}
<div class="container">
  <iframe src="https://www.youtube.com/embed/7X8II6J-6mU"></iframe>
</div>

<div class="container-flex">
  <iframe src="https://www.youtube.com/embed/7X8II6J-6mU"></iframe>
</div>

1

I had the same problem with a Wordpress site. None of the solutions above worked. When I inspected the iframe in Chrome Developer Tools, I saw that it was wrapped in a paragraph (p). I removed it, problem was solved.

So, if you will embed a Google Map in a Wordpress site, don't forget that WP adds paragraphs automatically.

0

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

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

like this:

<div style="height: 370px;">
    <iframe height="370"></iframe>
</div>
1
  • This actually solved my issue for a paypal button iframe in woocommerce/wordpress. Thanks!
    – Frizzant
    Oct 25, 2021 at 9:16
0

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>
0

pls add display: flex; and flex-direction: column; in the .boder style.

so the style will look like this:

.border {
  background: #e30606;
  width: 300px;
  height: 200px;
  border: 1px solid green;
  overflow: visible;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.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>

-1

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

-2

here is another answer please check it ...

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.