Aller au contenu

La propriété line-height


Monique

Sujets conseillés

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>

post-8-1099429650_thumb.jpg

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...