Compréhension approfondie de la hauteur de ligne en CSS

div {line-height:6px; } 
div {line-height:10.5; }

Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte< ;/div>
Si nous définissons .test {line-height:20px;}, alors la hauteur réelle de cet élément dépendra du contenu. Si la partie texte est affichée sous forme de ligne dans le navigateur, alors le div La hauteur réelle est de 20px. . Si le texte est affiché sous forme de deux lignes, alors la hauteur réelle du div est de 40 px et la hauteur de ligne du texte est de 20 px
Si nous définissons .test{height:40px}, alors la hauteur réelle de ceci ; L'élément est moyen. Il ne changera pas en raison de la quantité de contenu. Si le texte est affiché sur une seule ligne, la hauteur du div sera toujours de 40 pixels. S'il est affiché sur 2 lignes, mais la hauteur de ligne du texte est inférieure. que 20px, la hauteur du div ne changera pas en raison du contenu du texte. La hauteur est inférieure à la hauteur et change. Cependant, si la hauteur du contenu du texte est supérieure à 40 px, de manière générale, la hauteur du div augmentera en conséquence.

hauteur de la ligne et hauteur de la boîte de ligne
La hauteur et la hauteur de la ligne devraient jouer le rôle de hauteur en CSS ! Si une étiquette ne définit pas l'attribut height (y compris le pourcentage de hauteur), alors sa hauteur finale affichée doit être déterminée par la hauteur de ligne, même si le bug de hauteur par défaut sous IE6 est d'environ 11 pixels. Laissez-moi vous le dire lentement.

Permettez-moi d'abord de parler d'un phénomène que tout le monde connaît. Il y a un div vide,

si la valeur de hauteur n'est pas définie pour être au moins supérieure à 1 pixel. , la hauteur du div sera 0. . Si un espace ou du texte est saisi dans le div, le div aura une hauteur. Alors, avez-vous déjà réfléchi à la raison pour laquelle il y a une hauteur après qu'il y ait du texte dans le div ?

C'est une question apparemment simple, mais c'est une question très importante pour comprendre la hauteur des lignes. Certaines personnes pourraient penser que c’est parce que les mots le maintiennent ouvert ! Le texte prend de la place et étire naturellement le div. Je l'ai compris de cette façon au début, mais en fait, après avoir profondément compris le modèle en ligne, j'ai découvert que ce n'est pas du tout le texte qui augmente la hauteur du div, mais la hauteur de la ligne !

Remarque sur la hauteur de ligne

1. La hauteur de ligne ne fonctionne que pour le texte et ne fonctionne pas pour les images.
2. Utilisez Dreamweaver pour voir l'effet de hauteur de ligne en temps réel
3. Les valeurs négatives ne peuvent pas être utilisées pour cette valeur, et elles seront invalides si elles sont utilisées
Il convient de noter que dans chacun. navigateur, pour la hauteur de ligne Il existe également une différence subtile dans la solution de hauteur. Il y aura une différence de 1 px entre le haut et le bas. Si la hauteur de la ligne est un nombre pair, la plupart des navigateurs l'interpréteront normalement. nombre impair, certains navigateurs auront 1 px de plus que le bas, tandis que d'autres le feront. Certains navigateurs ajouteront 1 px de plus en bas qu'en haut. Pour certains sites Web ayant des exigences strictes, il est recommandé d'utiliser un nombre pair lors de la conception de la hauteur 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!