Iframe creates extra space below

css, html, iframe

Solution

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.

Problem

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?

Original source