Why Doesn't "display: block" & "width: auto" Stretch a Button to Fill the Container?

When using "display: block" and "width: auto" on a button, it may be expected to stretch and fill its container. However, this is not always the case. In particular, buttons in modern browsers behave differently from other block elements in this regard.

The reason behind this behavior lies in the nature of buttons as replaced elements. Replaced elements are those whose appearance and dimensions are not primarily determined by CSS, but rather by external factors such as the operating system or other external resources. In the case of buttons, their size and styling are often defined by platform-specific user interface conventions.

Intrinsic Dimensions

Replaced elements have intrinsic dimensions, meaning that their width and height are defined by the element itself rather than the surrounding content. When "width: auto" is applied to a replaced element, the intrinsic width of the element is used. For buttons, this intrinsic width typically corresponds to the size of the default button control defined by the operating system.

Visual Formatting Requirements

In addition to intrinsic dimensions, replaced elements can also have imposed visual formatting requirements. For buttons, these requirements include the display of a caption, the button's border, and other user interface elements. These formatting requirements override the effects of CSS properties such as "width: auto" and "display: block."

Conclusion

The behavior of buttons in regard to "display: block" and "width: auto" is a consequence of their status as replaced elements. Their intrinsic dimensions and visual formatting requirements take precedence over CSS properties, resulting in the observed behavior where buttons do not always stretch to fill their containers.