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?
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.
...
If you want more clarification...it seems that the button element is a replaced element in most modern browsers today and in the past, which means no matter how you style it, even after changing the default UA browser styles, it still retains width and height characteristics regardless of display properties. It therefore does have design characteristics tied to the browser and OS that override both the default UA style sheet in the browser and the author's styles, UNLIKE the non-replaced elements which can be changed.
Take the following test that demonstrates that:
<style type="text/css">
button,
p,
div {
all:revert;
all:unset;
all:initial;
display:initial;
width:initial;
height:initial;
display:inline !important;
width:100px;
height:100px;
background:green;
color:white;
text-align:center;
}
</style>
<button>button</button>
<br />
<p>paragraph</p>
<br />
<div>div</div>
When the <button>, <p>, and <div> elements are completely cleared of their CSS properties (all:revert and display:initial), then display:inline set with width and height, only <p> and <div> lose dimension. But the button element in modern browsers (Chrome and Firefox) still retains its "special" replaced ability to regain dimensions, regardless. Therefore, yes its "replaced" status affects its width and height characteristics.
Additional: If you set the dimensions above to "0px", the button element's background collapses but the "clickable" interface dimensions on the button element do not. The text area on the button is still clickable in most modern browsers. In Safari and Internet Explorer, the button becomes tiny but still exists with dimensions and is clickable.
The point is, yes these replaced elements have dimensions you can control but not entirely erase.