CSS utilise la méthode de la hauteur de ligne sans unité

Cet article présente principalement la méthode d'utilisation de la hauteur de ligne sans unités en CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

La hauteur de ligne est-elle. peut être hérité, de sorte que les éléments enfants n’ont pas besoin de définir à plusieurs reprises la hauteur de ligne. Nous apportons généralement également des unités à la fin (telles que : line-height:22px; ou line-height:1.4em;), mais l'endroit où la hauteur de ligne pose problème est également l'héritage et les unités ajoutées plus tard

Parfois, afin d'obtenir le centrage vertical d'une seule ligne de texte, nous donnerons à la hauteur de ligne une valeur fixe qui est la même que la hauteur. Parfois, afin d'ajuster l'espacement des lignes d'un paragraphe spécifique de texte, nous envisagez généralement d'utiliser des pourcentages ou des ems de taille relative. C'est peut-être une habitude, donc nous sommes tous habitués à avoir des unités à hauteur de ligne. Dans ces cas, nous n’avons pas besoin de considérer l’héritage de la hauteur de ligne et nous ne rencontrerons aucun problème. Bien sûr, lorsque nous utilisons l'héritage de hauteur de ligne, nous trouverons le problème.
Par exemple, le code suivant :

CSS :

<style> 
.line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } 
.line-height-test span { font-size: 30px; font-weight: bold; } 
</style>

HTML :

<p class="line-height-test"> 
<span>白培铭先生于1960年出生于中国台湾，毕业于中国台湾省清华大学核物理系，</span> 
之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造。 
</p>

Si la valeur de l'attribut line-height a des unités , puis hériter La valeur est une valeur spécifique au niveau px après la conversion (calculée d'abord puis héritée) et si la valeur de l'attribut n'a pas d'unité, le navigateur héritera directement de ce "facteur (valeur)" au lieu de la valeur spécifique calculée. À ce stade, sa hauteur de ligne sera recalculée en fonction de sa propre valeur de taille de police pour obtenir une nouvelle valeur de hauteur de ligne (héritée d'abord puis calculée).

Par exemple, il y a un p et un sous-élément p, et la hauteur de ligne de p est de 150 %. Puisque la taille de police par défaut est de 16 px, la valeur de hauteur de ligne spécifique de p peut être convertie en 16px * 150% = 24px Puisque la hauteur de ligne de p héritera de la valeur spécifique convertie de 24px, p est redéfini comme font-size:30px ; la taille de la police dépasse la taille de la hauteur de ligne, donc un chevauchement se produit. Le principe des autres unités est le même.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de CSS Comment utiliser l'arrière-plan

À propos de l'utilisation de l'attribut table-cell en CSS

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!