button is an inline element but width is working?

Question

Button is an inline element, but the width properties work on it, how come?

button {
    width: 300px;
}

<button>asdfsdf</button>
<button>234234d</button>

Solution 1

Most browsers display button elements as inline-block by default, according to the (not normative) Appendix D. Default style sheet for HTML 4.

Therefore, you could expect the width property to work, as described in Calculating widths and margins - Inline-block, non-replaced.

But it's not just that. button elements are replaced elements:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS.

Therefore, they have some special behavior. For example, independently of whether they have display: inline-block or display: inline, they are sized respecting the width property, according to Calculating widths and margins - Inline, replaced.

It's worth noting that HTML5 forces them to be displayed as inline-block anyways. This is explained in 10.5.2 Bindings - The button element:

@namespace url(http://www.w3.org/1999/xhtml);
button { binding: button; }

When the button binding applies to a button element, the element is expected to render as an 'inline-block' box rendered as a button whose contents are the contents of the element.

Solution 2

See W3C Reference (a list of HTML4 elements default CSS styles)

button is an inline-block element (by default) that can have a width set, as opposed to inline elements