why css width property is working with input element

Question

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?

Kinda spells it out right there. Since inputs are replaced inline elements, width applies to them. — j08691
– j08691, Commented Aug 14, 2015 at 17:02

emmanuel · Accepted Answer · 2015-08-14 17:09:50Z

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

edited Aug 14, 2015 at 17:09

answered Aug 14, 2015 at 17:03

emmanuel

9,61310 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

why css width property is working with input element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related