Iframe creates extra space below

Question

Why does an iframe add extra space under its element? Look at this weird behavior:

Answer 1

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.