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

Auteur : Bruno Sabot

Développeur Front end, Mobile, Ergonomie, UX

Une réflexion sur « Quick Tip – Hauteur d’un block de texte »

  1. 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 😉

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s