La différence entre la hauteur et la hauteur de ligne en CSS

Cet article présente principalement la différence entre height et line-height en CSS. Les amis dans le besoin peuvent s'y référer. 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 quelque chose

En d'autres termes, la hauteur de la ligne fait spécifiquement référence à la hauteur d'un une seule ligne, et la hauteur peut être toute la hauteur de l'élément

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

La hauteur de ligne peut être comprise directement 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 hauteur de ligne 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érite de l'élément parent et l'élément parent est une valeur fixe) ou sa valeur est une valeur fixe , le texte apparaîtra au-delà de la plage de hauteur de ligne qui se chevauche.

line-height a hérité d'attributs, il est donc préférable de définir la hauteur de ligne du texte principal 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 ?

line-height est aligné sur la ligne de base par défaut. 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 principal est de 14 px. l'autre peut faire 12 pixels.

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

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

Le code est le suivant :

button, input[type="button"], input[type="submit"] {
line-height:normal !important
}
input.button, a.button, bouton {
police : gras 12px Arial, Helvetica, sans-serif
padding : 5px 8px ; >débordement
: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!