<length>

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

De nombreuses propriétés CSS utilisent des valeurs de longueur. Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées. Par exemple, la propriété margin accepte les valeurs négatives alors qu'elles ne sont pas autorisées par la propriété padding.

On notera que bien que les valeurs du type <percentage> soient aussi des dimensions ce sont bien deux types distincts.

Une longueur est un nombre 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.

Unités de longueurs relatives
Longueurs liées à la police

em: Cette unité représente la taille (font-size) calculée de la police de l'élément.
ex: Cette unité représente la hauteur de la lettre x de la police 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.
cap: Cette unité représente la taille nominale d'une lettre capitale pour la police de l'élément.
ch: Cette unité représente la largeur du caractère 0 (zéro) dans la police actuelle.
ic: Cette unité représente la largeur entre le début du caractère ? 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 taille de la police 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.
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.

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% 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% de la largeur du viewport.
vmin: 1% de la valeur minimale entre la hauteur et la largeur du viewport.
vmax: 1% de la valeur maximale entre la hauteur et la largeur du viewport.

Unités de longueurs 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 a 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 relave à eux (1/96 de pouce).

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.