Piqûre de rappel pour certains, découverte pour d’autres, vous avez peut-être déjà remarqué que dans ce cas :
- <div style="font-size: 20px">Hello world!</div>
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 :
- <div style="font-size: 20px; line-height: 1em;">Hello world!</div>
A présent, le div a bien une hauteur de 20 pixels de haut !