Bonjour,

Suite à une question posée par doomer2, je me suis intéressée à la propriété CSS line-height, relativement méconnue.

Il est possible d'obtenir deux effets tout à fait différents selon le type d'élément auquel cette propriété est appliquée.
Je vous propose une capture d'écran de l'effet obtenu à partir des extraits de code suivants :

appliquée à un élément de type bloc, contenant des éléments de type en-ligne
CITATION
spécifie la hauteur minimale de chacune des boîtes en-ligne générées. Cette hauteur minimale se décompose en une hauteur minimale au-dessus de la ligne de base de l'élément de type bloc et en une profondeur minimale au-dessous de celui-ci, exactement comme si chacune des boîtes de ligne commençait par une boîte en-ligne de largeur nulle, celle-ci ayant les valeurs des propriétés de police et de hauteur de ligne de l'élément de type bloc

CODE
.bloc1 {
 background-color: #FDF5E6;
 line-height: 1em;
}
.bloc2 {
 background-color: #F5F5F5;
 line-height: 2em;
}

HTML
<div class="bloc1">
<p>la propriété line-height="1em" appliquée à un élément de type bloc</p>
<p>la propriété line-height="1em" appliquée à un élément de type bloc</p>
</div>
<div class="bloc2">
<p>la propriété line-height="2em" appliquée à un élément de type bloc</p>
<p>la propriété line-height="2em" appliquée à un élément de type bloc</p>
</div>


appliquée à des éléments de type en-ligne
CITATION
spécifie la hauteur exacte de chacune des boîtes générées par l'élément.

CODE
.enligne1 {
 background-color: #FDF5E6;
 line-height: 1em;
}
.enligne2 {
 background-color: #F5F5F5;
 line-height: 2em;
}

HTML
<p class="enligne1">la propriété line-height="1em" appliquée à un élément en ligne</p>
<p class="enligne1">la propriété line-height="1em" appliquée à un élément en ligne</p>
<p class="enligne2">la propriété line-height="2em" appliquée à un élément en ligne</p>
<p class="enligne2">la propriété line-height="2em" appliquée à un élément en ligne</p>


Cliquez pour voir le fichier joint