22

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 ?

Nicolas Zozol
  • 6,910
  • 3
  • 50
  • 74
  • 5
    img is technically an inline-*replaced* element. So it can take a width and a height: see http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element – Fabrizio Calderan Nov 12 '14 at 14:25
  • That's an excellent question! I've never thought about that before... – Casey Rule Nov 12 '14 at 14:25
  • See https://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element. – Lumen Nov 12 '14 at 14:26
  • 5
    The `img` tag is a replaced element, see here for what that is https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element – Huangism Nov 12 '14 at 14:29
  • This question is based on a false premise; that `` is an inline element. As already asked and answered here [“img” elements: Block level element or inline element?](http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element), it is not. – TylerH Nov 12 '14 at 17:02
  • 2
    The answer of this question (mentioned as duplicate) isn't correct: are not strictly inline-block element. And he's right, is an inline (replaced) tag. http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG – enguerranws Nov 13 '14 at 09:40

1 Answers1

23

<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 :

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/

enguerranws
  • 8,087
  • 8
  • 49
  • 97