Quick Tip – Hauteur d’un block de texte

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

Hello world!

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 :

font-size 30 29 28 27 26 25 24 23 22 21 20
height 36 35 34 33 31 31 30 28 27 25 25
font-size 19 18 17 16 15 14 13 12 11 10 9
height 23 22 20 20 18 16 16 15 14 12 11

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 :

Hello world!

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

Publicités