### La propriété line-height

La hauteur d'une ligne de texte est spécifiée par la propriété line-height dont la valeur est un nombre d'unités ou un nombre sans unité.

    html { line-height: 13px; }
    div { line-height: 1.6em; }
    h1 { line-height: 160%; }
    p { line-height: 1.8; }
    li { line-height: 2rem; }

L'unité de taille est à choisir en fonction du dispositif d'affichage. Par exemple il ne faut pas utiliser des centimètres pour afficher sur un écran pour lequel on privilégiera le pixel CSS (`px`), le cadratin (`em`), le pourcentage (`%`) la référence à la racine du document (`rem`) ou un nombre sans unité.

La propriété line-height est héritée : elles est transmise automatiquement de l'élément parent à ses enfants, quelque soit le niveau de descendance.
On peut donc facilement gérer la hauteur des lignes d'une page en mettant la propriété line-height sur l'élément body, ou sur l'élément html.

Exemple : hauteur de ligne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu et le prince d'Azkaban</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } p { width: 300px; border: 1px solid #aaa; } p:first-of-type { line-height: 1rem; } p:nth-of-type(2) { line-height: 1.5rem; } p:nth-of-type(3) { line-height: 2rem; } p:last-of-type { line-height: 0.5rem; }

L'exemple montre que la hauteur de ligne est importante pour la lisibilité du texte. Une hauteur trop failble rend le texte difficile à lire, tout comme une hauteur trop grande. La bonne hauteur de ligne se situe entre 1.3 et 1.6 fois la taille de la police.

### Centrage vertical

Une utilisation détournée de la hauteur de ligne permet de centrer verticalement un texte de un ou quelques mots dans une boîte. C'est particulièrement utile pour des éléments d'interface comme des options de menu, des libellés de zones réactives ou des labels de boutons.
Pour centrer verticalement le texte, on définit la valeur la propriété line-height égale à celle de la propriété height de l'élément.

Exemple : centrage vertical
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3> Choissisez votre camp ! </h3> <div class="bouton"> Les méchants </div> <div class="bouton"> Les gentils </div> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } .bouton { height: 80px; /* hauteur de la boîte */ line-height: 80px; /* hauetru de ligne */ float: left; /* pour mettre côte à côte */ background-color: #eee; /* couleur de fond gris clair */ margin-right: 20px; /* marge droite pour espacer */ width: 160px; /* largeur de la boîte */ outline: 1px solid #999; /* cadre gris */ text-align: center; /* centrer horizonatelement */ cursor: pointer; /* curseur réactif */ } .bouton:hover { /* au survol de la boîte */ font-weight: bold; /* texte en gras */ outline: 1px solid red; /* changement couleur du cadre */ }