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 !
Au moins ca a le mérite d’être clair.
Combien de fois j’ai pu voir un height pour fixer une hauteur égale sur les navigateurs, quitte à couper le texte à l’intérieur si plus grand que le conteneur pour certains……. C’est pourtant pas si complexe que ca CQFD