Unités CSS expliquées

Toutes les unités CSS : absolues, relatives à la police, relatives au viewport, les fonctions fluides, ainsi que les unités d'angle, de temps et de résolution — par rapport à quoi chacune est mesurée et quand l'utiliser.

Les unités absolues (px, pt) gardent une taille fixe quel que soit le contexte ; les unités relatives (rem, vw, %) s'ajustent par rapport à une valeur de référence. Préférez rem pour les tailles de police : il respecte le paramètre de taille de police racine de l'utilisateur, donc votre typographie honore sa préférence d'accessibilité. Utilisez clamp() pour une typographie fluide qui grandit et rétrécit avec le viewport sans jamais franchir une borne minimale ou maximale.

Tableau de référence · 38 entrées

38 of 38 rows


Absolues
	1/96 de pouce (le pixel de référence CSS).	Dimensions fixes d'interface : bordures, filets fins, tailles d'icônes.	border: 1px solid #000;
	1/72 de pouce (1pt = 1.333px).	Feuilles de style d'impression, où les tailles correspondent au papier physique.	font-size: 12pt;
	1 centimètre (≈37.8px).	Mises en page d'impression nécessitant des mesures du monde réel.	margin: 2cm;
	1 millimètre (≈3.78px).	Mesures d'impression fines.	padding: 5mm;
	1 pouce (96px = 2.54cm).	Mises en page d'impression dimensionnées en pouces.	margin: 1in;
Relatives à la police
	La taille de police de l'élément lui-même (héritée de son parent).	Espacement qui évolue avec le texte environnant.	padding: 1em;
	La taille de police de l'élément racine (l'élément html).	Tailles de police : respecte le paramètre de taille de police racine de l'utilisateur.	font-size: 1.25rem;
	La largeur de progression du glyphe « 0 » dans la police actuelle.	Définir une longueur de ligne lisible (caractères par ligne).	max-width: 70ch;
	La hauteur d'x de la police actuelle (hauteur du « x » minuscule).	Mesures verticales liées à la police.	line-height: 2ex;
	La hauteur de capitale de la police actuelle (hauteur d'une lettre majuscule).	Mesures verticales calées sur les capitales, plus serrées que ex.	padding-top: 0.5cap;
	La largeur de progression de l'idéogramme « 水 » (eau) dans la police actuelle.	Dimensionnement calé sur une cellule de caractère CJK.	width: 4ic;
	La hauteur de ligne calculée de l'élément lui-même.	Dimensionner des éléments en lignes de texte entières.	height: 3lh;
	La hauteur de ligne de l'élément racine.	Espacement en multiples de la hauteur de ligne de base du document.	margin-block: 2rlh;
Relatives au viewport
	La valeur de la même propriété chez le parent.	Mises en page fluides dimensionnées par rapport à l'élément conteneur.	width: 50%;
	1 % de la largeur du viewport.	Sections pleine largeur dimensionnées sur la largeur de l'écran.	width: 100vw;
	1 % de la hauteur du viewport.	Sections hero ou superpositions couvrant la hauteur de l'écran.	height: 100vh;
	1 % de la plus petite dimension du viewport.	Dimensionner des éléments pour tenir à l'écran dans toutes les orientations.	font-size: 5vmin;
	1 % de la plus grande dimension du viewport.	Remplir l'axe dominant du viewport.	font-size: 5vmax;
	1 % de la petite hauteur du viewport (interface du navigateur entièrement affichée).	Sections mobiles pleine hauteur qui tiennent au-dessus de l'interface du navigateur déployée.	height: 100svh;
	1 % de la grande hauteur du viewport (interface du navigateur masquée).	Arrière-plans qui doivent couvrir l'écran même quand l'interface du navigateur se rétracte.	height: 100lvh;
	1 % de la hauteur dynamique du viewport, suivant l'interface du navigateur quand elle apparaît et disparaît.	Le correctif mobile pour 100vh : la hauteur se redimensionne à mesure que l'interface du navigateur apparaît.	height: 100dvh;
	1 % de la petite largeur du viewport.	Équivalent en largeur de svh pour l'état le plus étroit du viewport.	width: 100svw;
	1 % de la grande largeur du viewport.	Équivalent en largeur de lvh pour l'état le plus large du viewport.	width: 100lvw;
	1 % de la largeur dynamique du viewport, suivant l'interface du navigateur.	Équivalent en largeur de dvh quand le viewport se redimensionne avec l'interface.	width: 100dvw;
	1 % de la taille du viewport le long de l'axe inline (largeur en modes d'écriture horizontaux).	Dimensionnement du viewport qui suit le sens d'écriture.	width: 50vi;
	1 % de la taille du viewport le long de l'axe de bloc (hauteur en modes d'écriture horizontaux).	Dimensionnement du viewport qui reste correct en modes d'écriture verticaux.	height: 50vb;
Fluides
	Une valeur préférée encadrée par un minimum et un maximum.	Typographie fluide qui ne franchit jamais une borne minimale ou maximale.	width: clamp(320px, 80vw, 1100px);
	La plus petite de ses arguments séparés par des virgules.	Plafonner une taille pour qu'elle ne dépasse jamais un maximum.	width: min(100%, 600px);
	La plus grande de ses arguments séparés par des virgules.	Imposer une taille minimale qui grandit avec le viewport.	width: max(50%, 300px);
Angles
	1/360 d'un cercle complet.	Transformations de rotation et positions d'angle de dégradé.	transform: rotate(45deg);
	Radians ; 1rad ≈ 57.2958deg.	Angles issus de calculs mathématiques, comme les transformations générées.	transform: rotate(1.5708rad);
	Grades ; 400grad = un cercle complet.	Valeurs d'angle héritées ou de type arpentage.	transform: rotate(100grad);
	1turn = un cercle complet de 360°.	Rotations complètes ou demi-tours lisibles d'un coup d'œil.	transform: rotate(0.5turn);
Temps
	Une seconde.	Durées d'animation et de transition.	transition: opacity 0.3s;
	Une milliseconde (1s = 1000ms).	Animations et délais courts de retour d'interface.	animation-duration: 150ms;
Résolution
	Points par pouce de la sortie.	Media queries de résolution ciblant l'impression.	@media (min-resolution: 300dpi)
	Points par unité px ; 1dppx équivaut à un écran standard de 96dpi.	Media queries Retina et haute densité.	@media (min-resolution: 2x)
	Points par centimètre (1dppx ≈ 2.54dpcm).	Media queries de résolution en unités métriques.	@media (min-resolution: 118dpcm)