Por que "display: block" e "width: auto" não esticam um botão para preencher o contêiner?

Ao usar "display: block" e " width: auto" em um botão, pode-se esperar que ele estique e preencha seu contêiner. No entanto, nem sempre é esse o caso. Em particular, os botões nos navegadores modernos se comportam de maneira diferente de outros elementos de bloco nesse aspecto.

A razão por trás desse comportamento está na natureza dos botões como elementos substituídos. Elementos substituídos são aqueles cuja aparência e dimensões não são determinadas principalmente pelo CSS, mas sim por fatores externos, como o sistema operacional ou outros recursos externos. No caso de botões, seu tamanho e estilo geralmente são definidos por convenções de interface de usuário específicas da plataforma.

Dimensões intrínsecas

Os elementos substituídos têm dimensões intrínsecas, o que significa que seus largura e altura são definidas pelo próprio elemento e não pelo conteúdo ao redor. Quando "width: auto" é aplicado a um elemento substituído, a largura intrínseca do elemento é usada. Para botões, essa largura intrínseca normalmente corresponde ao tamanho do controle de botão padrão definido pelo sistema operacional.

Requisitos de formatação visual

Além das dimensões intrínsecas, substituídas os elementos também podem ter impostos requisitos de formatação visual. Para botões, esses requisitos incluem a exibição de uma legenda, a borda do botão e outros elementos da interface do usuário. Esses requisitos de formatação substituem os efeitos das propriedades CSS, como "width: auto" e "display: block".

Conclusão

O comportamento dos botões em relação a " display: block" e "width: auto" é uma consequência de seu status como elementos substituídos. Suas dimensões intrínsecas e requisitos de formatação visual têm precedência sobre as propriedades CSS, resultando no comportamento observado em que os botões nem sempre se esticam para preencher seus contêineres.