Hauteur d'un bloc de texte

Piqûre de rappel pour certains, découverte pour d’autres, vous avez peut-être déjà remarqué que dans ce cas :

.bloc {  font-size: 20px;}

La hauteur du block div n’est pas de 20 pixel, mais « plus ». Ceci est, dans des cas d’intégration assez courants (positionnements relatifs) la source de problèmes.

Il est néanmoins assez difficile de définir ce « plus », qui semble être variable en fonction de la police utilisée et du navigateur.

Par exemple sous Chrome et Firefox avec Arial :

Le ratio est donc un calcul approximatif, probablement avec des arrondis, pas évident de connaitre donc la bonne hauteur du bloc.

C’est là que l’on fait intervenir le line-height. Il suffit de le rajouter Pour résoudre le problème :

.bloc {  font-size: 20px;  line-height: 20px;}

A présent, le div a bien une hauteur de 20 pixels de haut !