Accueil    CSS    Propriété Line-height
 



style css line-height  Style CSS line-height

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété line-height détermine la hauteur des lignes au sein d'un élément. Cette propriété est différente de font-size, dans le sens ou la hauteur des lignes est différente de celle des textes, ceux-ci étant disposés suivant la définition de la taille des lignes.

Si la taille des lignes est inférieure à celle du texte, les textes se superposeront légèrement lors des retours à la ligne. A l'inverse si la taille des lignes est plus grande l'espace entre les lignes sera plus important.
Remarque : la propriété font-size détermine la taille exacte des majuscules pour une police (pas les minuscules).

On utilise souvent la propriété line-height pour centrer verticalement du texte dans un conteneur : lorsque la valeur de la propriété line-height est supérieure à celle de font-size, l'écart de hauteur résultant se réparti de façon homogène au dessus et en dessous du texte, celui-ci étant donc centré verticalement.


Les unités spécifiques applicables pour valoriser la propriété line-height sont :
- valeur avec une unité spécifique (ex : line-height:2em; line-height:30px;)
- valeur sans unité : la taille sera le produit de cette valeur avec la taille de la police du texte
- pourcentage : la taille sera le produit du pourcentage avec la taille de la police du texte



Propriétés pour le style line-height :




Propriété Définition Valeurs CSS
line-height Détermine la hauteur des lignes de texte affichées au sein d'un élément normal
valeur (px, em ...)
nombre
%
inherit
CSS 1


Exemple d'utilisation du style css line-height :





Exemple de rendu sans employer la propriété line-height :

<div style="height:40px; width:560px; border:solid 1px black;">
   Texte inclu dans un élément div sans spécifier la propriété line-height
</div>


Le même exemple avec la propriété line-height valorisée :

<div style="height:40px; line-height:40px; width:560px; border:solid 1px black;">
   Texte inclu dans un élément div avec line-height valorisée à la hauteur de la div
</div>


Exemple de texte centré dans une div carrée :

<div style="height:80px; line-height:80px; width:80px; border:solid 1px black; text-align:center;">
   D I V
</div>


Exemple avec la valeur de la propriété line-height inférieure à celle de font-size :

<div style="line-height:10px; font-size:14px; width:560px; border:solid 1px black;">
   La propriété font-size est valorisée à 14px.
   La propriété line-height est valorisée à 10px.
   On observe une légère superposition du texte.

   Attention, la valeur font-size correspond a la hauteur des majuscules.

   TEXTE EN MAJUSCULE A 14PX
   TEXTE EN MAJUSCULE A 14PX
   TEXTE EN MAJUSCULE A 14PX
</div>


Exemple de rendu sans employer la propriété line-height :

Texte inclu dans un élément div sans spécifier la propriété line-height


Le même exemple avec la propriété line-height valorisée :

Texte inclu dans un élément div avec line-height valorisée à la hauteur de la div


Exemple de texte centré dans une div carrée :

D I V

Exemple avec la valeur de la propriété line-height inférieure à celle de font-size :

La propriété font-size est valorisée à 14px.
La propriété line-height est valorisée à 10px.
On observe une légère superposition du texte.

Attention, la valeur font-size correspond a la hauteur des majuscules.

TEXTE EN MAJUSCULE A 16PX
TEXTE EN MAJUSCULE A 16PX
TEXTE EN MAJUSCULE A 16PX