css - Why does width/height work on an inline img element

Question

It is my understanding that inline elements can't usually be sized using CSS width and height properties. It seems that an inline img is an exception to this, and that you can resize it using width and height.

img {
  display: inline;
  height: 35px; // this works
}

I'd like to understand if this is something specialized to an img tag, or if there is some other nuance that makes this work.

Can someone point me towards some spec or documentation that describes this behavior?

Answer 1

an img is an inline replaced element unlike span for example which is an inline non-replaced element and we can define width/height on replaced element. Here is the relevant part of the specification that define how height/width should behave

https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height

When it comes to non-replaced elements you will find this:

The 'width' property does not apply. ^ref

The 'height' property does not apply. ^ref

---

Same logic apply to tranformation where we can apply transformation to img and not span.

Related: CSS transform doesn't work on inline elements

---

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

---

Note that in the specification it's also said that inline-block replaced element are exactly the same as inline replaced element so setting inline or inline-block to the img will make no difference.