Button is an inline element but width is working

Question

Button is an inline element, but the width properties work on it. Why is that?

button {
    width: 300px;
}

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

Ilyse

Answer 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 anyway. 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.

Gezira

This answer should be top answer for any button related questions. – Abet

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

Heshvan

display: inline would be ignored but not display: block - weird :) – Heshvan

Answer 3

Set min-width: 300px;.

It works to me even if the button is inline-block.

Gaius