Pourquoi les balises d'ancrage n'héritent-elles pas de la hauteur et de la largeur ?

Pourquoi les balises d'ancrage n'héritent pas de la hauteur et de la largeur des éléments contenant

Lors de l'inspection des balises d'ancrage avec les outils de développement, les utilisateurs peuvent remarquer des écarts entre leur taille affichée et la taille de l’élément contenant. Cet article examine les raisons de ce comportement.

Affichage des balises d'ancrage : en ligne par défaut

Les balises d'ancrage () ont une valeur d'affichage par défaut en ligne. Cela signifie que leur contenu s'écoule dans le texte et occupe uniquement la largeur nécessaire pour accueillir son contenu, y compris le texte et les images intégrées.

Hauteur : déterminée par les métriques de police

La spécification CSS indique que la propriété height ne s'applique pas aux éléments en ligne non remplacés comme les balises d'ancrage. Au lieu de cela, leur hauteur est déterminée en fonction des métriques de la police. En pratique, cela équivaut à la hauteur d’une seule ligne de texte. Par conséquent, les balises d'ancrage en question ont une hauteur de 18px, ce qui correspond à la taille de la police utilisée dans le texte sans être influencée par la taille de l'image ou la hauteur du div englobant.

Largeur : Somme du contenu, Espacement et marges

Pour les éléments en ligne non remplacés, la propriété width ne s'applique pas non plus. Au lieu de cela, la largeur est calculée en fonction du contenu, du remplissage, des bordures et des marges de l'élément.

Dans le code fourni, la largeur de la première balise d'ancrage est de 144 px, résultant de la somme de la largeur de l'image (110 px ), la marge gauche (20px) et les deux bordures de 5px. De même, la largeur de la deuxième balise d'ancrage est de 310 px, calculée à partir de la largeur de l'image plus large (280 px), de la marge gauche (20 px) et des bordures de 10 px.

Influence des espaces

C'est il convient de noter que les espaces peuvent affecter la largeur calculée. Dans ce cas, puisque les balises d'ancrage sont disposées dans une zone de ligne, seuls les espaces à la fin de la première balise d'ancrage et au début de la seconde contribuent aux largeurs. Les autres espaces, au début du premier et à la fin du second, sont supprimés.

En résumé, la hauteur et la largeur des balises d'ancrage ne sont pas héritées de leurs éléments conteneurs de par leur type d'affichage et le CSS spécifications pour les éléments en ligne non remplacés. Leurs dimensions sont déterminées en fonction des propriétés intrinsèques de l'élément, telles que les mesures de police, la taille du contenu, l'espacement et les marges.

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!