Line-height


La propriété line-height (hauteur de ligne) définit la quantité d’espace se trouvant au-dessus et en dessous des éléments inline, c’est à dire des éléments définis comme display: inline ou display: inline-block. Cette propriété est utilisée le plus souvent pour définir l’interlignage (leading).

//CSS
p {
  line-height: 1.5;
}

La propriété line-height accepte les valeurs de mots-clés normal, inherit et none ainsi que des nombres, longueurs et pourcentages.

La spécification indique que la valeur normal ne représente pas une valeur concrète appliquée à tous les éléments, mais résulte plutôt du calcul d’une valeur “raisonnable” qui dépend de la taille de police définie sur l’élément ou dont il hérite.

Pour définir une longueur, toutes les unités CSS valides peuvent être employées (px, em, rem, etc.).

Une valeur en pourcentage prend pour base la taille de police de l’élément et la multiplie par ce pourcentage, par exemple :

See the Pen nkFvE by Louis Lazaris (@impressivewebs) on CodePen.

Dans la démo ci-dessus, les trois paragraphes voient leur espacement réglé sur 150%, 200% et 250% respectivement. L’élément body ayant une font size de 20px, cela signifie que l’interligne sera respectivement de 30px, 40px et 50px.

Interlignage sans unité

La méthode recommandée pour définir l’interlignage est un nombre simple, ce qu’on appelle l’interlignage “sans unité”. Cela peut être n’importe quel nombre, y compris décimal. La raison pour laquelle cette méthode est recommandée est que les éléments enfants hériteront ainsi de la valeur brute, plutôt que de la valeur calculée. Dans le second cas, la propriété line-height étant héritée en cascade, l’élément enfant prendrait la même valeur calculée de line-height que son parent, ce qui pourrait poser des problèmes si, par exemple, la font size était de 18px dans l’élément parent (d’où un interlignage de 27px pour une valeur de line-height:150%) et de 40px dans l’élément enfant, avec le même interlignage hérité de 27px...

Si l’on ne spécifie pas d’unité (line-height: 1.5), les éléments enfants peuvent calculer leur hauteur de ligne à partir de leur propre font size, au lieu d’hériter d’une valeur arbitraire de leur parent.


À lire également sur La Cascade :

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Line-height, cette propriété méconnue, par Vincent de Oliveira (slides)

articles en anglais :

Unitless line-heights, par Eric Meyer


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.