Pourquoi les balises d'ancrage ignorent-elles la hauteur du conteneur mais respectent-elles la largeur ?

Pourquoi la balise d'ancrage ignore la hauteur et la largeur de son conteneur

En HTML, les balises d'ancrage () semblent souvent ignorer les propriétés de hauteur et de largeur définies pour les éléments qu'ils contiennent. Ceci peut être observé en inspectant la taille de ces éléments à l'aide d'outils de développement, comme illustré dans un JsFiddle fourni.

Calcul de la hauteur

La spécification CSS 2.1 dicte que la hauteur de la zone de contenu d'une balise d'ancrage est déterminé uniquement par ses métriques de police. Comme les balises d’ancrage s’affichent par défaut en ligne, elles s’enroulent essentiellement autour de leur contenu. Ainsi, la propriété height ne s'applique pas aux éléments en ligne comme les balises d'ancrage.

Dans l'exemple fourni, la seule ligne de texte à l'intérieur des balises d'ancrage détermine la hauteur de 18 px, quelle que soit la spécification de hauteur de l'élément environnant.

Calcul de la largeur

Bien que les balises d'ancrage n'adhèrent pas à la propriété de hauteur de leurs conteneurs, elles participent au calcul de la largeur. Cependant, la largeur est déterminée par le contenu propre des éléments, y compris le remplissage, les bordures et les marges.

Pour la première balise d'ancrage, la largeur est calculée comme :

• Largeur du contenu (espace image) : 114px
• Marge gauche : 20px
• Bordures gauche et droite : 2x5px
• Largeur totale : 144px

De même, la largeur de la deuxième balise d'ancrage est déterminée comme :

• Largeur du contenu (image) : 280px
• Marge gauche : 20px
• Gauche et droite bordures : 2x5px
• Largeur totale : 310px

De plus, l'espacement dans le contenu des balises d'ancrage affecte le calcul de la largeur. Les espaces au début de la première balise et à la fin de la deuxième balise sont omis en raison du formatage en ligne, tandis que les espaces entre eux sont réduits en un seul. Cet espace contribue à la largeur de la première balise mais pas à la seconde.

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!