Le tableau ci-dessous montre la correspondance entre des dimensions exprimées avec des unités différentes.
- CM : valeur absolue en centimètres
- PX : valeur absolue en pixels
- REM : valeur relative à l'élément HTML
- EM : valeur relative à la taille de la fonte de l'élément parent
- % : valeur relative à la taille de la fonte de l'élément parent
Vous pouvez modifier les valeurs des éléments parents pris comme référence.
On peut remarquer que :
- les valeurs absolues sont bien absolues, mais interprétées selon la résolution de l'écran
- la modification de font-size dans html ou body agit bien sur toute la page
- les valeurs en em et % sont identiques
- une modification de HTML a une influence sur EM, mais pas l'inverse
| CM | PX | REM | EM | % |
|---|---|---|---|---|
| 0.11 | 4 | 0.25 | 0.25 | 25.0% |
| 0.16 | 6 | 0.375 | 0.375 | 37.5% |
| 0.21 | 8 | 0.5 | 0.5 | 50% |
| 0.26 | 10 | 0.625 | 0.625 | 62.5% |
| 0.32 | 12 | 0.75 | 0.75 | 75% |
| 0.37 | 14 | 0.875 | 0.875 | 87.5% |
| 0.42 | 16 | 1 | 1 | 100% |
| 0.48 | 18 | 1.125 | 1.125 | 112.5% |
| 0.53 | 20 | 1.25 | 1.25 | 125% |
| 0.63 | 24 | 1.5 | 1.5 | 150% |
| 0.74 | 28 | 1.75 | 1.75 | 175% |
| 0.85 | 32 | 2 | 2 | 200% |
| 0.95 | 36 | 2.25 | 2.25 | 225% |
| 1.06 | 40 | 2.5 | 2.5 | 250% |
| 1.27 | 48 | 3 | 3 | 300% |
| 1.48 | 56 | 3.5 | 3.5 | 350% |
| 1.9 | 72 | 4.5 | 4.5 | 450% |
| 2.01 | 76 | 4.75 | 4.75 | 475% |
Pour information, la hauteur d'un caractère (em square) spécifie la hauteur de la zone pouvant contenir tous les types de caractères. Plus d'infos sur cette page
Une petite démonstration :
1cm
mMqbÅÇ
38px
Mes extensions