Exemples détaillés de la différence entre la hauteur de ligne et la hauteur

line-height : la hauteur de la ligne définit la distance supérieure et inférieure entre le texte
height : la hauteur consiste à définir la hauteur d'un calque ou de quelque chose

En d'autres termes, la hauteur de la ligne fait spécifiquement référence au hauteur d'une seule ligne, hauteur Pouvez-vous définir la hauteur de tous les éléments ?

Les bords se chevaucheront-ils une fois le texte agrandi ?

La hauteur de ligne est simple à comprendre comme la hauteur du texte plus la zone vide au-dessus et en dessous du texte. Il est préférable de ne pas définir l'unité pour la hauteur de ligne. Si l'unité est fixe, la ligne. la hauteur est la valeur déterminée.

Lorsque la police est agrandie et que la hauteur de ligne de l'élément n'est pas définie (hérité de l'élément parent et que l'élément parent est une valeur fixe) ou que sa valeur est une valeur fixe, le texte dépassera la plage de hauteur de ligne et chevauchement.

line-height a hérité d'attributs, il est donc préférable de définir la hauteur de ligne de la partie de texte sur le nombre 1,5, qui est la hauteur de la police * 1,5

In. de cette façon, la hauteur de la ligne suivra la police. Le zoom suit le zoom.

Comment centrer le texte et l'image dans la ligne ?

La hauteur de ligne est par défaut la ligne de base. Vous pouvez utiliser vertical-align:middle pour centrer le texte et l'image.

Comment faciliter la lecture ?

Couleur d'arrière-plan du texte en ligne #fff, couleur du texte #333 ; il y a une hauteur de ligne vide autour du texte de 1,25 à 1,5 pour réduire le sentiment d'oppression. La taille du texte est de 14 px, et le reste peut l'être. 12px.

le bouton de saisie se comporte de la même manière dans tous les navigateurs.

La valeur Linde-Height par défaut de Firefox est par défaut normale et doit être spécifiée explicitement.

button, input[type="button"], input[type="submit"] { 
line-height:normal !important; 
} 
input.button, a.button, button { 
font: bold 12px Arial, Helvetica, sans-serif; 
padding: 5px 8px; 
overflow:visible; 
}

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!