Compréhension complète de la hauteur de ligne et de l'alignement vertical

La hauteur des lignes, la taille de la police et le ligne vertical sont des attributs clés pour définir la disposition des éléments dans la ligne. Ces trois attributs sont des relations interdépendantes, et la modification de la distance entre les lignes et le réglage des alignements verticaux nécessite leurs efforts articulaires. Le contenu pertinent de la taille des polices a été introduit en détail dans les polices CSS. Cet article introduira principalement la hauteur des lignes et l'alignement vertical.

La hauteur de la ligne de hauteur de ligne fait référence à la distance entre les lignes de base de la ligne de texte. La hauteur de ligne n'affecte en fait que les éléments en ligne et d'autres contenus en ligne et n'affecte pas directement les éléments au niveau des blocs. Vous pouvez également définir la hauteur de ligne pour un élément au niveau du bloc, mais cette valeur n'aura un impact que lorsqu'il est appliqué au contenu en ligne des éléments au niveau des blocs. Déclarer la hauteur de ligne sur un élément au niveau du bloc définira une hauteur minimale de boîte de ligne pour le contenu de l'élément au niveau du bloc

Valeur: <longueur> | <pourcentage> | <nom> | Normal | hériter

Valeur initiale: normal

Appliqué à: tous les éléments

Héritage: oui

Pourcentage: taille de police par rapport à l'élément

Pour comprendre en profondeur la hauteur de ligne, vous devez comprendre les termes courants sur la hauteur de ligne.

Pour les éléments non remplacés ou une partie du texte anonyme dans la ligne, la taille de la police et la famille de police déterminent la hauteur de la zone de contenu. Dans la police de la chanson, si la taille d'une police d'un élément d'affilée est de 15px, la hauteur de la zone de contenu est de 15px; Dans d'autres polices, la hauteur de la zone de contenu n'est pas égale à la taille de la police.

La zone de contenu plus l'espacement des lignes est égal à la boîte en ligne de ligne. Si la taille de la police d'un élément non remplacé dans une ligne est de 15px et que la hauteur de ligne est de 21px, la différence est 6px. L'agent utilisateur divise ces 6 pixels en deux et applique la moitié en haut et en bas de la zone de contenu respectivement, ce qui donne la ligne à l'intérieur de la boîte

Lorsque la hauteur de ligne est inférieure à la taille de la police, la boîte en ligne est en fait inférieure à la zone de contenu

La boîte de ligne est définie comme la distance entre le haut de la boîte intérieure la plus élevée dans la ligne et le bas de la boîte intérieure la plus basse, et le haut de chaque boîte de ligne est à côté du bas de la boîte de ligne précédente.

La marge intérieure, la marge extérieure et la bordure n'affectent pas la hauteur du cadre de ligne, c'est-à-dire qu'elle n'affecte pas la hauteur de la ligne.

La limite de bordure des éléments en ligne est contrôlée par la taille d'une police au lieu de la hauteur de ligne

Les marges ne seront pas appliquées en haut et en bas des éléments non remplacés dans la ligne

marge-gauche, rembourrage à gauche, bordure de bordure est appliquée au début de l'élément; marge droite, rembourrage droit, bordure-bordure est appliquée à la fin de l'élément

Le remplacement des éléments dans une ligne nécessite l'utilisation de valeurs de hauteur de ligne pour positionner correctement les éléments lorsqu'il est aligné verticalement. Parce que la valeur en pourcentage de l'aligne verticale est calculée par rapport à la hauteur de la ligne de l'élément. Pour l'alignement vertical, la hauteur de l'image elle-même n'est pas pertinente, la clé est la valeur de la hauteur de ligne

Par défaut, l'élément de remplacement en ligne est situé sur la ligne de base. Si vous ajoutez une marge intérieure, une marge extérieure ou une bordure à l'élément de remplacement, la zone de contenu sera déplacée. La ligne de base de l'élément de remplacement est la ligne de base de la dernière boîte de ligne dans le flux normal. Sauf si le contenu de l'élément de remplacement est vide ou la valeur de l'attribut de débordement lui-même n'est pas visible, dans ce cas, la ligne de base est le bord inférieur de la marge

L'alignement vertical est utilisé pour définir l'alignement vertical, tous les éléments alignés verticalement affecteront la hauteur de la ligne.

Valeur: ligne de base | sub | Super | Top | Text-top | Middle | Bas | Text-fond | <longueur> | <pourcentage> | hériter

Valeur initiale: ligne de base

Appliqué à: Éléments en ligne, éléments de remplacement, cellules de table

Héritage: aucun

Pourcentage: hauteur de ligne par rapport à l'élément-hauteur de ligne

[Remarque] La valeur en pourcentage de l'alignement vertical dans IE7-Browser ne prend pas en charge la hauteur de la ligne décimale, et l'effet d'affichage est différent de celui des navigateurs standard lors de la prise de base, du milieu, du fond de texte, etc. La solution couramment utilisée consiste à définir l'affichage: bloc en ligne dans les éléments de ligne.