Référence des unités CSS
Les unités de longueur CSS existent en deux familles : les unités absolues fixées à une taille physique, et les unités relatives qui s'adaptent à la police, au parent ou au viewport. Pour le responsive, vous utiliserez surtout les relatives — en particulier rem, % et les unités de viewport.
Mis à jour 2026-07-06
Unités absolues
| Unité | Signification |
|---|---|
| px | Pixels — l'unité de base pour les écrans. 1px est un pixel indépendant du périphérique. |
| pt | Points — 1/72 pouce. Courant dans les feuilles de style d'impression. |
| in | Pouces — 1in = 96px = 2,54cm. |
| cm | Centimètres — surtout pour l'impression. |
| mm | Millimètres — surtout pour l'impression. |
| pc | Picas — 1pc = 12pt = 1/6 pouce. Rare. |
Unités relatives
| Unité | Signification |
|---|---|
| % | Pourcentage de la valeur correspondante de l'élément parent. |
| em | Relatif à la taille de police propre de l'élément. 1.5em = 1,5× la taille de police. |
| rem | Relatif à la taille de police de la racine (html). Prévisible pour un dimensionnement cohérent. |
| ex | La hauteur d'x de la police actuelle (rarement utilisée). |
| ch | La largeur du caractère '0' dans la police actuelle. |
| vw | 1% de la largeur du viewport. |
| vh | 1% de la hauteur du viewport. |
| vmin | 1% de la plus petite dimension du viewport (largeur ou hauteur). |
| vmax | 1% de la plus grande dimension du viewport. |
| fr | Une fraction de l'espace libre dans un conteneur CSS Grid. |
em vs. rem : la distinction clé
Les deux s'adaptent à la taille de police, mais em est relatif à la taille de police de l'élément actuel (il se cumule donc à travers les éléments imbriqués), tandis que rem est toujours relatif à la taille de police de la racine (il reste donc prévisible quelle que soit la profondeur d'imbrication). En cas de doute, rem pour les tailles et les espacements réserve le moins de surprises.
Outils associés