Pourquoi un bouton ne se développe-t-il pas pour remplir son conteneur avec « display : block » et « width : auto » ?

Pourquoi « affichage : bloc » et « largeur : auto » ne développent-ils pas un bouton pour remplir le conteneur ?

En HTML, certains éléments, tels que les boutons, les entrées, les sélections et les images, sont désignés comme « éléments remplacés ». Ces éléments ont des dimensions et des apparences inhérentes déterminées par des ressources externes, telles que le système d'exploitation ou les plugins.

Lorsque vous appliquez "display: block" à un bouton, cela indique que le bouton doit se comporter comme un élément de niveau bloc. et occupe toute la largeur de son conteneur. Cependant, "width: auto" précise que la largeur intrinsèque du bouton doit être utilisée.

Les éléments remplacés possèdent des dimensions intrinsèques, ce qui signifie que leur largeur et leur hauteur sont fixes et ne peuvent pas être modifiées par CSS. Par exemple, les dimensions intrinsèques d'un élément d'image sont déterminées par la taille du fichier image. Lorsque « width : auto » est appliqué à un élément remplacé, le navigateur respecte sa largeur intrinsèque.

De plus, les éléments remplacés peuvent avoir des exigences de formatage visuel imposées par le navigateur ou le système d'exploitation qui remplacent le style CSS. Les boutons, par exemple, ont des contrôles d'interface utilisateur intégrés qui ne peuvent pas être modifiés uniquement via CSS.

Dans le cas des boutons, bien qu'ils ne soient pas officiellement définis comme un élément remplacé par le W3C, ils présentent un comportement similaire. Par conséquent, en appliquant "display: block; width: auto;" à un bouton ne l'étirera pas pour remplir le conteneur car sa largeur intrinsèque est limitée par les exigences de formatage visuel du bouton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!