Différence entre une taille de texte en px, em, et %

Exemple du texte qui prend la taille suivant l'unité utilisée:

Dans la CSS on a body {font-size:100%} 10 px ≠ 1em ≠ 100%

Texte en PIXEL:
Les hauteurs ne sont pas identiques. (10 pixels)

Texte en EM:
Les hauteurs ne sont pas identiques. (1em)

Texte en POURCENTAGE:
Les hauteurs ne sont pas identiques. (100%)

Comment faire pour avoir une même hauteur suivant l'unité utilisée ?

Dans la CSS on a body {font-size:62.5%} 10 px = 1em = 100%
On fixe le font-size à 62.5% et toutes les unités ont la même taille. Peut être très utile si dans un site il y a différente unités utilisés.

Texte en PIXEL:
Les hauteurs sont identiques. (10 pixels)

Texte en EM:
Les hauteurs sont identiques. (1em)

Texte en POURCENTAGE:
Les hauteurs sont identiques. (100%)

Retour au menu