Pourquoi les balises d'ancrage n'héritent-elles pas des dimensions des éléments qu'elles contiennent ?

Dimensions des balises d'ancrage

Les balises d'ancrage, par défaut, n'assument pas les dimensions des éléments qu'elles contiennent. Ceci est expliqué par la spécification CSS 2.1, qui régit la façon dont les éléments sont disposés sur une page Web.

Élément en ligne non remplacé

Une balise d'ancrage () est considéré comme un élément en ligne non remplacé. Les éléments en ligne s'écoulent le long de la ligne de texte et n'ont généralement pas de largeur ou de hauteur inhérente.

Calcul de la hauteur

Pour les éléments en ligne non remplacés, la propriété 'hauteur' n’est pas applicable. La hauteur est généralement déterminée par les métriques de police du contenu de l'élément. Dans l'exemple fourni, la hauteur est de 18 px, qui est déterminée par la taille du texte contenu dans l'ancre.

Calcul de la largeur

La propriété « largeur » également ne s'applique pas directement aux éléments en ligne non remplacés. La largeur est calculée en fonction des remplissages, des bordures, des marges et du contenu de l'élément.

Contenu de l'image

Les images contenues dans les balises d'ancrage ne contribuent pas aux calculs de largeur. . En effet, la largeur des éléments en ligne non remplacés n'est pas influencée par la taille de leur contenu.

Réduire la marge

Les espaces entre les balises d'ancrage dans un contexte en ligne suivent l'effondrement de la marge règles. Dans ce cas, les espaces consécutifs entre les balises d’ancrage se réduisent en un seul espace. L'espace à la fin de la première ancre contribue à sa largeur, contrairement à l'espace au début de la deuxième ancre.

Exemples de calcul

La première ancre la balise a une largeur de 114px (espace image) 20px (marge gauche) 10px (bordures gauche et droite) = 144px.

La deuxième balise d'ancrage a une largeur de 280px (image) 20px (marge gauche) 10px (bordures gauche et droite) = 310px.

Conclusion

Les balises d'ancrage, étant des éléments en ligne non remplacés, n'héritent pas de la hauteur ou de la largeur de leur contenu. éléments. Leurs dimensions sont principalement déterminées par leur propre contenu (texte), leurs remplissages, leurs bordures, leurs marges et l'application des règles de réduction des marges dans un contexte en ligne.

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!