Button is an inline element, but the width properties work on it, how come?
button {
width: 300px;
}
<button>asdfsdf</button>
<button>234234d</button>
See Question&Answers more detail:osButton is an inline element, but the width properties work on it, how come?
button {
width: 300px;
}
<button>asdfsdf</button>
<button>234234d</button>
See Question&Answers more detail:osMost 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.