Comment la hauteur de ligne interagit-elle avec les caractères du texte et le rendu du navigateur ?

La hauteur de la ligne dépend-elle du texte Personnage ?

<p>blah_blah</p><p></p><p></p><p>qypj;,</p>

> ;

Lorsque vous définissez la hauteur de ligne sur 1 en CSS, le comportement peut varient selon les navigateurs. Cet exemple, rendu dans Firefox, montre que les traits de soulignement dans la première ligne n'apparaissent pas, alors que dans la troisième ligne, ils le font. D'autres navigateurs et l'exécuteur d'extraits affichent des traits de soulignement dans les deux cas.

Quel comportement est correct ?

Différents navigateurs et polices peuvent influencer les calculs de hauteur de ligne. Cela ne dépend pas uniquement de la propriété line-height.

Les caractères peuvent-ils modifier la hauteur de ligne ?

Non, les caractères seuls ne peuvent pas modifier la hauteur de ligne. Cependant, certains caractères, comme "p", "g" et "j", peuvent s'étendre en dessous de la ligne de base et contribuer à l'espace vertical nécessaire à la ligne.

Implication de la hauteur de ligne : 1

Régler la hauteur de ligne sur 1 ne garantit pas qu'un texte tiendra dans l'espace désigné. Il précise uniquement que la zone de ligne doit avoir exactement la taille de la police.

Zone de contenu par rapport à la zone de ligne

Les propriétés de la police définissent la zone de contenu, tandis que la ligne -height contrôle la zone de ligne. Nous ne pouvons pas contrôler la zone de contenu, mais pouvons ajuster la zone de ligne pour accueillir le texte.

Exemple :

span {<br> background : rouge;<br> couleur : #fff;<br> taille de police : 20px;<br> famille de polices : monospace;<br>}<p>body {<br> margin: 10px 0;<br> border-top: 1px solid;<br> border-bottom: 1px solid;<br> animation: changement 2s linéaire alternative infinie ;<br>}</p><p>@keyframes change {<br> de {</p><pre class="brush:php;toolbar:false">line-height: 0.2

}

à {

line-height: 2

}
}

blah_blah<br>

Dans cet exemple, la zone de contenu de l'étendue reste constante, mais la zone de ligne s'agrandit et se contracte à mesure que le changements de hauteur de ligne. Cela démontre le contrôle indépendant de la zone de contenu et de la zone de ligne.

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!