Div doesn't take up height of iframe

Question

Please refer to this http://jsfiddle.net/7wt8L/1/

I tried embedding an iframe in a div for which I did not specify any height. I expected the iframe to fill up the div but there's some space at the bottom of the div.

I do know how to make the div take the height of the iframe but I'm curious to why there's the space at the bottom of the yellow div when I don't specify the height of the yellow div. I'm also slightly confused that giving the iframe a property of display:block allows the div to take the height of the iframe too.

Answer 1

Iframes are display: inline by default. Inline elements can be affected by many things, including line-height , vertical-align etc. Try setting your line-height to 0 on the parent of the iframe, you'll see the margin will disappear. http://jsfiddle.net/7wt8L/2/

If you don't want those text-oriented properties effecting your elements, use display: block; instead.

Answer 2

iframes display inline by default.

So if you are going with margin: auto; ( as you have not set margin so by default its margin : auto ) you will need to add display: block ; as well.

Also for auto margins to work an explicit width must be set on the iframe (which you did).