¿Por qué "display: block" y "width: auto" no estiran un botón para llenar el contenedor?

Cuando se usa "display: block" y " ancho: auto" en un botón, se puede esperar que se estire y llene su contenedor. Sin embargo, este no es siempre el caso. En particular, los botones de los navegadores modernos se comportan de manera diferente a otros elementos de bloque en este sentido.

La razón detrás de este comportamiento radica en la naturaleza de los botones como elementos reemplazados. Los elementos reemplazados son aquellos cuya apariencia y dimensiones no están determinadas principalmente por CSS, sino por factores externos como el sistema operativo u otros recursos externos. En el caso de los botones, su tamaño y estilo suelen estar definidos por convenciones de interfaz de usuario específicas de la plataforma.

Dimensiones intrínsecas

Los elementos reemplazados tienen dimensiones intrínsecas, lo que significa que sus El ancho y el alto están definidos por el elemento en sí y no por el contenido circundante. Cuando se aplica "width: auto" a un elemento reemplazado, se utiliza el ancho intrínseco del elemento. Para los botones, este ancho intrínseco normalmente corresponde al tamaño del control de botón predeterminado definido por el sistema operativo.

Requisitos de formato visual

Además de las dimensiones intrínsecas, reemplazadas Los elementos también pueden haber impuesto requisitos de formato visual. Para los botones, estos requisitos incluyen la visualización de un título, el borde del botón y otros elementos de la interfaz de usuario. Estos requisitos de formato anulan los efectos de las propiedades CSS como "width: auto" y "display: block".

Conclusión

El comportamiento de los botones con respecto a " display: block" y "width: auto" es consecuencia de su condición de elementos reemplazados. Sus dimensiones intrínsecas y requisitos de formato visual tienen prioridad sobre las propiedades CSS, lo que da como resultado el comportamiento observado en el que los botones no siempre se estiran para llenar sus contenedores.