Why <img> takes a height when it's an inline element? [duplicate]

Question

My browser shows that the <img> tag is an inline tag. Numerous answers in Stack says that span does not accept an height property because it's an inline tag. How can <img> do that ? Why isn't it rather an inline-block element ?

Answer 1

<img> tag is not strictly an inline element, but a inline-replaced element.

In a nutshell, it means that <img> (and other elements, as <video> or, <object> if you still use it), has intrinsic dimensions. So CSS can handle those dimensions (and other properties, such as margins). Because <img> is an inline tag, that is replaced by its own source file (well, it's still an inline element).

Some doc about that :

• https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
• http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG

Funny fact (I guess) : you can't override (or simply handle) inline-replaced behavior to "normal" inline behavior on those elements with CSS (when it works when you set it to inline-block or block or whatever you want). See this example : http://jsfiddle.net/s8apbbof/