Monique Posté 2 Novembre 2004 Partager Posté 2 Novembre 2004 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> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant