Le type de données CSS <length> correspond à une mesure de distance.

De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer width, margin, padding, font-size, border-width, text-shadow, …

Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées. On notera que bien que les valeurs <percentage> soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <length>, ce sont bien deux types distincts.

Syntaxe

Une longueur est un nombre (type <number>) immédiatement suivi d'une unité de longueur (px, em, pc, in, mm…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.

Note : Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.

Unités

Unités de longueur relatives

Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (viewport). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.

Longueurs liées à la police

Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.

cap
Cette unité représente la taille nominale d'une lettre capitale pour la police (font) de l'élément.
ch
Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle.
em

Cette unité représente la font-size calculée de l'élément. Si utilisée avec la propriété font-size, elle représente la taille de police héritée de l'élément.

Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le rythme vertical de la page, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS line-height, font-size, margin-bottom et margin-top ont souvent des dimensions exprimées en em.

ex
Cette unité représente la hauteur d'x de la font de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. 1ex ≈ 0.5em dans de nombreuses polices.
ic
Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.
lh
Cette unité représente la valeur calculée de la propriété line-height, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.
rem

Cette unité représente la font-size de l'élément racine (par exemple la taille de la police de l'élément <html>). Quand utilisée avec font-size sur l'élément racine, elle représente sa valeur initiale.

Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité em, mais la réalisation est un petit peu plus complexe.

rlh
Cette unité représente la valeur calculée de la propriété line-height de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés font-size ou line-height de l'élément racine, l'unité rlh fait référence aux valeurs initiales des propriétés.
Longueurs liées au viewport

Les longueurs liées au viewport définissent une longueur relative à la taille du viewport, qui correspond à la partie visible du document.

Dans un bloc de déclaration @page, l'utilisation des longueurs liées au viewport sont invalides et la déclaration sera ignorée.

Note : Si les éléments <html> et <body> ont overflow: auto, l'espace pris par les barres de défilement/les ascenseurs ne sera pas soustrait au viewport. En revanche, cet espace est retiré si on utilise overflow: scroll.

vb
1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.
vh
1/100e de la hauteur du viewport.
vi
1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.
vw
1/100e de la largeur du viewport.
vmin
1/100e du côté le plus petit du viewport.
vmax
1/100e du côté le plus grand du viewport.

Unités de longueur absolues

Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.

Pour les périphériques ayant un faible nombre de points par pouce, l’unité px représente le pixel de référence physique et les autres sont définies de façon relative à lui. Ainsi, 1in est définit comme 96px, ce qui équivaut à 72pt. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (in), centimètres (cm) et millimètres (mm) ne correspondent pas forcément à la longueur de l’unité physique du même nom.

Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (in), centimètres (cm) et millimètres (mm) sont définis comme leur équivalent physique. Par conséquent, l’unité px est définie comme étant relavite à eux (1/96 de pouce).

Note : Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que em et rem (notamment pour font-size).

px
Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.
mm
Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
Q
Un quart de millimètre (1/40e de centimètre).
cm
Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
in
Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
pt
Un point pica (soit 1/72e de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
pc
Un pica (soit 12 points, soit 1/6e de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
mozmm , retiré avec Firefox 59
Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.

Unités CSS et points par pouce

L’unité in ne représente pas un pouce physique de l’écran, mais 96px. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à 96dpi. Sur les périphériques dotés d’une plus grande densité de pixel, 1in fera moins d’1 pouce physique. De la même manière, mm, cm, et pt ne sont pas des longueurs absolues.

Quelques exemples particuliers :

  • 1in est toujours égal à 96px,
  • 3pt est toujours égal à 4px,
  • 25.4mm est toujours égal à 96px.

Interpolation

Les valeurs du type <length> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 4
La définition de '<length>' dans cette spécification.
Brouillon de l'éditeur Ajout des unités vi, vb, ic, lh et rlh.
CSS Values and Units Module Level 3
La définition de '<length>' dans cette spécification.
Candidat au statut de recommandation Ajout des unités ch, rem, vw, vh, vmin, vmax
CSS Level 2 (Revision 1)
La définition de '<length>' dans cette spécification.
Recommendation Définition explicite des unités em, pt, pc, px (la définition était implicite pour CSS1)
CSS Level 1
La définition de '<length>' dans cette spécification.
Recommendation Définition initiale. Définition implicite des unités em, pt, pc et px.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
cap unit
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
ch unitChrome Support complet 27Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes From Firefox 1 to Firefox 3, ch was the width of the M character.
Notes From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE Support complet 9Opera Support complet 20Safari Support complet 7WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 7.1Samsung Internet Android Support complet Oui
ex unitChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
ic unit
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
lh unit
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
mozmm unit
ExpérimentaleNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 4 — 59IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android ? Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Q unit
Expérimentale
Chrome Support complet 63Edge Aucun support NonFirefox Support complet 49IE Aucun support NonOpera Support complet 50Safari Aucun support NonWebView Android Support complet 63Chrome Android Support complet 63Edge Mobile Aucun support NonFirefox Android Support complet 49Opera Android Support complet 50Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
rem unitChrome Support complet 4Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet 11.6Safari Support complet 4.1WebView Android Support complet 2Chrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 12Safari iOS Support complet 4Samsung Internet Android Support complet Oui
rlh unit
Expérimentale
Chrome Aucun support NonEdge Support complet OuiFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
vb unit
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
vh unitChrome Support complet 20Edge Support complet 12Firefox Support complet 19IE Support complet 9Opera Support complet 20Safari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 19Opera Android Support complet OuiSafari iOS Support complet 6Samsung Internet Android Support complet Oui
vi unit
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
vmax unitChrome Support complet 26Edge ? Firefox Support complet 19IE Aucun support NonOpera Support complet 20Safari Support complet OuiWebView Android Support complet 1.5Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 19Opera Android Aucun support NonSafari iOS Support complet 4Samsung Internet Android Support complet Oui
vmin unitChrome Support complet 20Edge ? Firefox Support complet 19IE Support complet 10
Support complet 10
Support complet 9
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : vm
Opera Support complet 20Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 19Opera Android Aucun support NonSafari iOS Support complet 6Samsung Internet Android Support complet Oui
vw unitChrome Support complet 20Edge Support complet 12Firefox Support complet 19IE Support complet 9Opera Support complet 20Safari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 19Opera Android Support complet OuiSafari iOS Support complet 6Samsung Internet Android Support complet Oui
Viewport-percentage lengths invalid in @pageChrome ? Edge ? Firefox Support complet 21IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 21Opera Android ? Safari iOS ? Samsung Internet Android ?
1in is always equal to 96pxChrome Support complet OuiEdge ? Firefox Support complet 4IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,