line-height
La propriété line-height indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas remplacés, line-height indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne. Cette propriété fonctionne sur les éléments de type bloc.La propriété line-height peut être définie par :
- Le mot-clé normal. Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de font-family.
- Un nombre. La valeur utilisée est sans unité et correspond à un facteur multiplicateur de la taille de fonte utilisée. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir line-height et éviter les effets de l'héritage.
- Une longueur utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites sur la page <length>. La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage indiqué, multiplié par la taille calculée de la police de l'élément.
- Un pourcentage. La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage indiqué, multiplié par la taille calculée de la police de l'élément.
<style>
.bloc {
position: relative;
width: 450px;
height: 100px;
border: 1px dashed black;
font-size: 50px;
font-weight: bold;
color: red;
}
.bloc2 {
position: relative;
width: 450px;
height: 100px;
border: 1px dashed black;
font-size: 50px;
font-weight: bold;
line-height: 100px;
color: blue;
margin-top: 20px;
}
.carre {
position: absolute;
width: 100px;
height: 100px;
top: 0px;
background-color: yellow;
margin-left: 350px;
}
</style>
<div class="bloc">
Mon texte ici
<div class="carre"></div>
</div>
<div class="bloc2">
Mon texte ici
<div class="carre"></div>
</div>
Mon texte ici
Mon texte ici
Sur l'exemple, on peut se rendre compte de l'effet produit par la propriété line-height. Les deux blocs ont les mêmes propriétés sauf le deuxième qui a la propriété line-height égale à la hauteur du bloc ce qui permet de centrer verticalement le texte. On utilise souvent cette propriété pour règler les interlignes d'un texte.