CODEWITHSUNDEEP
htmlcss
cozloz
cozloz

Reputation: 3

Div doesn't take up height of iframe

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.

Upvotes: 0

Views: 62

Answers (2)

4dgaurav
4dgaurav

Reputation: 11506

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).

Upvotes: 0

Christian
Christian

Reputation: 19740

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.

Upvotes: 1

Related Questions