Why are iframes inline-elements by default?

Question

iframe = Inline?

While debugging some layout problem today I was surprised to see that <iframe> elements have a default display property of inline.

For me this seems strange, especially considering that you can apply a height and width to an <iframe> that is respected by the browser, which should not be the case for a simple inline-element.

So can anyone explain me the reasoning behind this?

Demo

HTML

<iframe id="test"></iframe>

CSS

alert($('#test').css('display'))

https://jsfiddle.net/0tdLr9pq/

Thanks!

Answer 1

Because the HTML4 spec said so:

The IFRAME element allows authors to insert a frame within a block of text. Inserting an inline frame within a section of text is much like inserting an object via the OBJECT element: they both allow you to insert an HTML document in the middle of another, they may both be aligned with surrounding text, etc.

The "be aligned with surrounding text" part means they shouldn't be block-level by default.

And it's true that, usually, inline elements ignore the height and width properties:

10.3.1 Inline, non-replaced elements

The width property does not apply.

10.6.1 Inline, non-replaced elements

The height property does not apply.

But that's not true for replaced elements, like iframe. This is explained in 10.3.2 and 10.6.2 sections.

Answer 2

IFRAME stand for Inline Frame. See this : http://www.w3.org/TR/html401/present/frames.html#h-16.5