Comment les dimensions des balises d'ancrage () sont-elles calculées en CSS ?

) Calculé en CSS ? " />

Comprendre le calcul de la taille des balises d'ancrage

Les balises d'ancrage () sont souvent utilisées pour créer des liens vers d'autres pages. Par défaut, elles sont des éléments en ligne qui n'héritent pas de la hauteur et de la largeur des éléments qu'ils contiennent, ce qui entraîne une confusion parmi les développeurs. Cet article explore les raisons de ce comportement et explique comment sont les dimensions des balises d'ancrage. calculé.

Éléments en ligne et zone de contenu

La spécification CSS 2.1 indique que les éléments en ligne, tels que les balises d'ancrage, font partie du flux de contenu et ne créent pas leur propre boîte au niveau du bloc. La hauteur et la largeur de leur zone de contenu sont influencées par des facteurs tels que la taille de la police, le contenu du texte et les styles appliqués au bloc. element.

Calcul de la hauteur

Pour les éléments en ligne non remplacés tels que les balises d'ancrage, la spécification CSS ne définit pas explicitement la manière dont la hauteur est généralement calculée. sur les métriques de police, ce qui donne une hauteur de 18 px, représentant une seule ligne de texte. La hauteur n'est pas affectée par la taille de l'image ou de l'élément de bloc environnant.

Calcul de la largeur

La largeur des éléments en ligne est régie par le contenu, le remplissage, les bordures et les marges de l'élément lui-même. Pour les balises d'ancrage, la largeur est calculée comme :

Content Width + Margin (Left) + Border (Left and Right)

Dans le JsFiddle fourni, la largeur du premier L'élément mesure 144 px, comprenant la largeur de l'image (114 px), la marge gauche (20 px) et les bordures gauche et droite (5 px chacune). De même, la largeur du deuxième L'élément mesure 310 px, déterminé par la largeur du contenu (280 px), la marge gauche (20 px) et les bordures gauche et droite (5 px chacune).

Gestion de l'espace

Quand les éléments en ligne sont disposés horizontalement, les espaces entre eux sont traités comme suit :

• Les espaces de début du premier élément sont ignoré.
• Les espaces de fin du dernier élément sont ignorés.
• Espaces réduits : les espaces entre les éléments adjacents sont fusionnés en un seul espace, le premier espace étant conservé.

Dans l'exemple JsFiddle, l'espace réduit à la fin du premier élément contribue à sa largeur, tandis que l'espace réduit au début du deuxième élément L'élément n'affecte pas sa largeur.

En comprenant ces principes CSS, les développeurs peuvent mieux contrôler la disposition et les dimensions des balises d'ancrage dans leurs pages Web.

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!