Iframe creates extra space below

Question

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>