Comment la réduction de la taille de la police entraîne-t-elle une augmentation de la hauteur ?

Question

J'ai un bloc avec une hauteur de ligne spécifique dans lequel j'insère du contenu avec un pseudo-élément ::before.

.block::before {
  content:'text here';
}

Cela fonctionne très bien. Mais si je donne également au contenu une taille de police plus petite

.block::before {
  font-size:.6em;
  content:'text here';
}

Les blocs deviennent en fait plus grands. pourquoi donc?

.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3em; border:1px solid green
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6em;
    content:'world!';
}

<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>

La ligne du haut n'a pas de changement de taille de police, contrairement à la ligne du bas.

Maintenant, je vois qu'une solution possible est de définir le pseudo-élément line-height设置为0。或者到1em。或者甚至到 normal。那么发生了什么？通过将字体大小设置为 .6em 是否将 line-height sur une valeur étrange ? Pourquoi?

PS Bien que cela puisse sembler être un doublon (voir la liste à droite), aucune des réponses que j'ai lues jusqu'à présent n'explique pourquoi le paramètre line-height:normal fait l'affaire. Quelque chose doit se produire pour définir implicitement la hauteur de ligne sur une valeur plus grande. C'est ce que je veux découvrir.

Answer 1

EDIT : Cette question a reçu beaucoup d'attention ces derniers temps, elle a donc été mise à jour ici pour la rendre plus utile.

---

La solution d'Alohci est correcte, mais peut ne pas être absolument claire pour les plus enclins aux graphiques.

Alors s'il vous plaît, permettez-moi de clarifier la solution avec des images.

Tout d'abord, la hauteur de ligne hérite de la taille pour laquelle elle a été calculée, donc même si elle commence par em 单位指定的，但子级将继承以像素为单位的值。例如，如果字体大小为 20px 且行高为 3em, la hauteur de ligne sera de 60 pixels, même pour les descendants avec des tailles de police différentes (sauf s'ils spécifient leur propre hauteur de ligne).

Supposons maintenant que la police ait un descendeur 1/4. Autrement dit, si vous avez une police de 20 pixels, la descente fait 5 pixels et la montée est de 15 pixels. Divisez ensuite la hauteur de ligne restante (40 pixels dans ce cas) de manière égale au-dessus et au-dessous de la ligne de base, comme indiqué ci-dessous.

Pour les blocs avec des polices plus petites (0,6em ou 12 pixels), la hauteur de ligne restante est de 60 à 12 ou 48 pixels, qui est également divisée à parts égales : 24 au-dessus de la ligne de base et 24 en dessous.

Ensuite, si nous combinons les deux polices sur la même ligne de base, vous verrez que les hauteurs de ligne ne sont pas divisées de la même manière, donc la hauteur totale du bloc conteneur augmente même si les deux hauteurs de ligne sont de 60 pixels.

J'espère que cela explique tout !

Answer 2

La hauteur des boîtes .lorem, .ipsum, .dolor et .sit est la hauteur de la boîte sur une seule ligne qu'elles contiennent.

La hauteur de chaque zone de ligne est la hauteur maximale au-dessus de la ligne de base des piliers de la ligne et du texte dans cette ligne + la hauteur maximale en dessous de la ligne de base. Parce que les piliers et le texte sont alignés sur la ligne de base.

Pour plus de clarté, la hauteur (en em) ci-dessous fait référence à la taille de la police de l'ensemble du conteneur (c'est-à-dire l'élément body)

En .ipsum (taille de police 1em), la hauteur au-dessus de la ligne de base des piliers et du texte est de 1em (moitié supérieure en tête) + 13/16em (contremarche, environ), la hauteur en dessous de la ligne de base est de 1em (demi-ligne en tête) + 3/16em ( la partie descendante, environ) + 1em (avant la moitié inférieure de la ligne), soit un total de 3em.

Dans .sit (taille de police 0,6em), la hauteur au-dessus de la ligne de base est le maximum de [1em (moitié supérieure en tête) + 13/16em (partie montante, environ piliers)] et [1,2] em (moitié supérieure en tête) ) + 0,6 x 13/16em (partie montante, env.)], la hauteur en dessous de la ligne de base est de [1em (partie inférieure menant) + 3/16em (partie montante, env.) maximum en partie descendante, env.) pour les jambes de force ] et [1,2em (moitié inférieure en tête) + 0,6 x 3/16em (partie descendante, environ) pour le texte].

L'évaluation et la conversion en décimales nous donnent 1,8125em au-dessus de la ligne de base, 1,3125em en dessous de la ligne de base, pour un total de 3,125em, soit 3em de plus que .ipsum.