Why can input elements be sized if they are inline elements?

I was under the impression that inline elements could not have their heights resized, but I am able to do so with <input type="text"/> elements.

Am I correct that <input type="text"/> elements are inline?

If so, what makes them different from <span></span> elements in how they can or cannot be resized.


An input element is inline-block by default, not inline.

On the other hand, an element such as a span, is inline by default.

The width/height of an inline-block element, such as input can be changed (example).

While an inline element, for instance, span, cannot be changed by default, as its dimensions are defined by the “rendered content within them”. (example).

This [width] property does not apply to non-replaced inline elements. The content width of a non-replaced inline element’s boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats. - W3 reference