katspaugh katspaugh - 2 months ago 12
CSS Question

Iframe creates extra space below

Why does an iframe add extra space under it's element? Look at this weird behavior: http://jsbin.com/UraFalo/1/

enter image description here

How to work around?

Answer

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 */
}

Update

For an explanation to 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.