Why does width apply to a button with display inline?

Question

According to MDN, a button is an inline element.

However, button elements have default styling with display: inline-block (See this questio

Answer 1

There are 2 types of element.

1. Non-replaced elements
2. Replaced elements

Button belongs to replaced element category.

You can find more on below link.

• Littlewebhut
• SitePoint

So, for button, according to spec, it becomes right.

Inline, non-replaced elements

The width property does not apply. A computed value of auto for margin-left or margin-right becomes a used value of 0.

Inline, replaced elements (This section applies to button)

A computed value of auto for margin-left or margin-right becomes a used value of 0.

If height and width both have computed values of auto and the element also has an intrinsic width, then that intrinsic width is the used value of width.

If height and width both have computed values of auto and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if width has a computed value of auto, height has some other computed value, and the element does have an intrinsic ratio; then the used value of width is:

 (used height) * (intrinsic ratio)

If height and width both have computed values of auto and the element has an intrinsic ratio but no intrinsic height or width, then the used value of width is undefined in CSS 2.1. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of width is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.

If width has a computed value of auto, and the element has an intrinsic width, then that intrinsic width is the used value of width.

If width has a computed value of width, but none of the conditions above are met, then the used value of width becomes 300px.But, if 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.