Iframe creates extra space below

Question

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

Answer 1

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.