La propriété line-height

[Monique]

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

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

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

<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

spécifie la hauteur exacte de chacune des boîtes générées par l'élément.

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

<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>