Pourquoi « affichage : bloc » et « largeur : auto » n'étirent-ils pas un bouton pour remplir le conteneur ?

Lors de l'utilisation de « affichage : bloc » et « width: auto" sur un bouton, on peut s'attendre à ce qu'il s'étire et remplisse son conteneur. Cependant, ce n’est pas toujours le cas. En particulier, les boutons des navigateurs modernes se comportent différemment des autres éléments de bloc à cet égard.

La raison derrière ce comportement réside dans la nature des boutons en tant qu'éléments remplacés. Les éléments remplacés sont ceux dont l'apparence et les dimensions ne sont pas principalement déterminées par CSS, mais plutôt par des facteurs externes tels que le système d'exploitation ou d'autres ressources externes. Dans le cas des boutons, leur taille et leur style sont souvent définis par des conventions d'interface utilisateur spécifiques à la plate-forme.

Dimensions intrinsèques

Les éléments remplacés ont des dimensions intrinsèques, ce qui signifie que leur la largeur et la hauteur sont définies par l'élément lui-même plutôt que par le contenu environnant. Lorsque "width: auto" est appliqué à un élément remplacé, la largeur intrinsèque de l'élément est utilisée. Pour les boutons, cette largeur intrinsèque correspond généralement à la taille du contrôle de bouton par défaut défini par le système d'exploitation.

Exigences de formatage visuel

En plus des dimensions intrinsèques, remplacées les éléments peuvent également avoir imposé des exigences de formatage visuel. Pour les boutons, ces exigences incluent l'affichage d'une légende, la bordure du bouton et d'autres éléments de l'interface utilisateur. Ces exigences de formatage remplacent les effets des propriétés CSS telles que "width: auto" et "display: block".

Conclusion

Le comportement des boutons par rapport à " display: block" et "width: auto" sont une conséquence de leur statut d'éléments remplacés. Leurs dimensions intrinsèques et leurs exigences de formatage visuel ont priorité sur les propriétés CSS, ce qui entraîne le comportement observé où les boutons ne s'étirent pas toujours pour remplir leurs conteneurs.