Line-height - Astuces CSS | CSS Almanach 2025

La line-heightpropriété définit la quantité d'espace au-dessus et au-dessous des éléments en ligne. Autrement dit, les éléments définis sur display: inlineou display: inline-block. Cette propriété est le plus souvent utilisée pour définir le début des lignes de texte.

p ( line-height: 1.5; )

La line-heightpropriété peut accepter les valeurs de mot-clé normalou noneainsi qu'un nombre, une longueur ou un pourcentage.

Selon la spécification, une valeur de «normal» n'est pas simplement une valeur concrète unique qui est appliquée à tous les éléments, mais se calcule plutôt à une valeur «raisonnable» en fonction de la taille de police définie (ou héritée) sur l'élément.

Une valeur de longueur peut être définie à l'aide de n'importe quelle unité CSS valide (px, em, rem, etc.).

Une valeur en pourcentage est la taille de la police de l'élément multipliée par le pourcentage. Par exemple:

Découvrez ce stylo!

Dans la démo ci-dessus, les trois paragraphes ont leurs hauteurs de ligne réglées à 150%, 200% et 250%, respectivement. L'élément body a sa taille de police définie à 20px. Cela signifie que les hauteurs de ligne calculées pour les paragraphes sont respectivement de 30 px, 40 px et 50 px.

Hauteurs de ligne sans unité

La méthode recommandée pour définir la hauteur de ligne consiste à utiliser une valeur numérique, appelée hauteur de ligne «sans unité». Une valeur numérique peut être n'importe quel nombre, y compris un nombre décimal, comme cela est utilisé dans le premier exemple de code de cette page.

Les hauteurs de ligne sans unité sont recommandées en raison du fait que les éléments enfants hériteront de la valeur numérique brute, plutôt que de la valeur calculée. Avec cela, les éléments enfants peuvent calculer leurs hauteurs de ligne en fonction de leur taille de police calculée, plutôt que d'hériter d'une valeur arbitraire d'un parent qui est plus susceptible de devoir être remplacé.