why css width property is working with input element

问题

According to CSS docs:

The width CSS property ... applies to all elements but non-replaced inline elements, table rows, and row groups

Input is inline element. So why width property is work with input element?

回答1:

The exception is for non-replaced inline elements. Input is a replaced element.

Replaced element

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. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like vertical-align.

Reference: MDN - Replaced element

来源：https://stackoverflow.com/questions/32015112/why-css-width-property-is-working-with-input-element