Why can a button's height be specified even if we make it inline explicitly?

Question

We can't set width and height of inline elements but even if I make button's display property as inline, still I can set its height. Some answers say that its because its a replaced element, but there doesn't seem to be any consensus whether its replaced or not.

Also, can we set height/width of all replaced elements even if they're inline?

Answer 1

The HTML5 specification now has a whole section on Button Layout

Sometimes it's treated like a replaced element, and sometimes like an inline-block element. But it's never treated as a non-replaced inline element.

In detail, it says that:

Button layout is as follows:

The 'display' property is expected to act as follows:

If the computed value of 'display' is 'inline-grid', 'grid', 'inline-flex', or 'flex', then behave as the computed value.

Otherwise, if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.

Otherwise, behave as 'flow-root'.

...

If the element is absolutely-positioned, then for the purpose of the CSS visual formatting model, act as if the element is a replaced element. [CSS]

If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.

For the purpose of the 'normal' keyword of the 'align-self' property, act as if the element is a replaced element.

...