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