Pourquoi les balises d'ancrage n'héritent-elles pas des dimensions de leurs conteneurs parents ?

Balises d'ancrage : pourquoi elles n'héritent pas des dimensions de leur conteneur

Lors du rendu des pages Web, la taille des balises d'ancrage peut être déroutante. Bien qu'elles soient contenues dans des éléments avec une hauteur et une largeur explicites, les balises d'ancrage ne parviennent souvent pas à hériter de ces dimensions. Pour clarifier ce comportement, plongeons dans les spécifications CSS et explorons les mécanismes qui les sous-tendent.

Spécifications CSS

Selon la spécification CSS 2.1, les dimensions de la zone de contenu d'une boîte (largeur et hauteur ) sont influencés par divers facteurs, notamment le fait que l'élément générateur possède la propriété « largeur » ou « hauteur », la présence de texte ou d'autres zones dans la zone, et considérations spécifiques à la table.

Propriété d'affichage de la balise d'ancrage

Par défaut, la propriété La balise (ancre) possède une valeur d’affichage en ligne. Les éléments en ligne, ainsi que leur contenu, participent directement à la mise en page de la page. Cette nature d'élément non remplacé affecte la façon dont ses dimensions sont déterminées.

Calcul de la hauteur

Pour les éléments en ligne non remplacés comme les balises d'ancrage, la propriété « hauteur » n'est pas applicable. Au lieu de cela, la hauteur de la zone de contenu est basée sur la police, comme indiqué dans la spécification CSS. Dans l'exemple donné, la hauteur de la balise d'ancrage est de 18 px, dérivée de la seule ligne de texte de l'image. Ni le contenu de l'image ni la hauteur du conteneur ne jouent un rôle.

Calcul de la largeur

La propriété « width » ne s'applique pas non plus aux éléments en ligne non remplacés. La largeur est dictée par le contenu, les remplissages, les bordures et les marges de la balise d'ancrage. Pour la première balise d'ancrage, la largeur est calculée comme :

Width = content (114px) + left margin (20px) + left and right borders (10px) = 144px

Pour la deuxième balise d'ancrage :

Width = content (280px) + left margin (20px) + left and right borders (10px) = 310px

Gestion de l'espace

De plus, la gestion de l'espace influence la calcul de la largeur. Dans les contextes en ligne, les espaces de début (à l'extrême gauche) et de fin (à l'extrême droite) sont supprimés, tandis que les espaces interstitiels sont réduits en un seul espace. Cela affecte le calcul de la largeur en ajoutant potentiellement de l'espace à la largeur de la balise d'ancrage.

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!