En CSS, les unités de longueur sont nécessaires pour spécifier les dimensions de certains éléments, comme leur largeur, ou la taille des caractères. CSS a beaucoup d'unités de longueur comme le millimètre
(mm), le centimètre (cm), le pouce (in) et le point (pt). Cependant, quand on développe des pages Web
destinées à être vues sur un écran, les unités les mieux adaptées sont le pixel, le pourcent et le cadratin.
Le pixel (px) est une unité de longueur dite absolue qui, pour les média imprimés, vaut exactement un quatre-vingt-seizième de pouce.
Pour les média de type écran (ordinateurs, smartphones), la situation est un peu plus complexe ; selon les dernières spécifications, pour un moniteur d'ordinateur récent typique, la valeur du pixel devrait coïncider avec la dimension d'un pixel physique de l'écran. Cependant, si vous modifiez la taille d'affichage de votre écran (DPI), plusieurs navigateurs ne font pas d'ajustement en conséquence et les résultats vont donc varier sensiblement d'un navigateur à l'autre¹.
Les pixels peuvent être utilisés pour spécifier des dimensions (largeur, hauteur) ou pour indiquer la taille d'une police ; la valeur d'une police normale par défaut est souvent 16px² :
width: 970px;
font-size: 16px;
¹ Ces faits s'appliquent aussi à l'affichage des photos, car dans l'élément img, les valeurs des attributs width et
height correspondent à des dimensions en pixels tels que définis dans le CSS.
² Veillez à ne pas laisser d'espace avant les unités. Il faut écrire 12px, 50% ou 1em,
et non pas 12 px, 50 % ou 1 em.
Le pourcent (%) peut être utilisé pour spécifier la taille d'une police dans un élément. Si par exemple la taille de la police héritée par une section est 16px, le code :
font-size: 75%;
fera passer la taille de la police de cette section à 12px.
Comme on le verra, on peut aussi utiliser un pourcentage pour définir la largeur d'une division relativement à la largeur de l'élement parent :
<div style="width: 50%">
</div>
Le cadratin (em, à ne pas confondre avec l'élément em qui donne de l'emphase à une portion d'un texte) est une unité de longueur relative à la taille de la police.
Dans un élément où la taille de la police est 16px, 1em = 16px, .5em = 8px et 2em = 32px, etc. Dans un autre élément, où la taille de la police serait 12px, on aurait 1em = 12px, .5em = 6px et 2em = 24px, etc.
Tout comme les pixels, les cadratins peuvent être utilisés pour spécifier des dimensions ou des tailles de police (sur la base de la taille de la police de l'élément parent) :
h1 {font-size: 1.5em; padding: 1em;}
La prudence est de rigueur, car si on change la taille de la police, on change automatiquement la valeur du cadratin !
Pour éviter ce genre de problème, le CSS3 introduit le cadratin de l'élément racine³, le rem. Il s'utilise comme le em,
sauf que les mesures sont relatives à la taille de la police de l'élément html (et non pas de l'élément parent).
³ L'élément racine (« root » en anglais, d'où le r dans rem) est l'élément html.