Informatique


Les unités en CSS

Aller à

Généralités

CSS permet de choisir parmi un large éventail.

Les unités de longueur sont divisées en deux groupes, les unités absolues et les unités relatives (mesurées par rapport à une valeur supérieure - elles peuvent donc être négatives) - voir les tableaux ci-dessous.

Il est conseillé de se cantonner aux unités % et rem pour un affichage fluide ou pour du texte, et à px quand on a besoin de placer les éléments au pixel près... Les autres valeurs doivent être le plus souvent évitées.


Unités absolues

px pixel Valeur en pixels. La définition d'un pixel étant "96 pixels/pouce", le pixel n'est pas forcément recommandé dans tous les cas (cf. les remarques précédentes).
cm centimètre Valeur en centimètres. Risque d'affichage différent sur plusieurs écrans. En effet, les réglages et résolutions sont tellement variés que ce qui semble correspondre à 1 cm sur un écran donné pourra être beaucoup plus grand ou plus petit sur un autre.
mm millimètre Valeur en millimètres. Même remarque que pour les centimètres.
in pouce (2.54 cm) Valeur en pouces (inches). Même remarque que pour les centimètres.
pt point Valeur en point. Le point est une mesure typographique utilisée par les imprimeurs (d'où les "points par pouce" de certaines résolutions) et les traitements de texte. Ici encore, les remarques des centimètres s'appliquent.
pc pica
(12 pt)
Valeur en picas. Un autre terme de typographie, et donc, du fait de son origine "papier", les remarques précédentes tiennent.

Unités relatives

% Valeur en pourcentage. L'élément définit prendra un pourcentage donné de la taille de son élément parent.
vw
(vieuwport width)
Il s'agit du centième de la largeur de la fenêtre dans laquelle s'ouvre la page.
vh
(vieuwport height)
Il s'agit du centième de la hauteur de la fenêtre dans laquelle s'ouvre la page.
em Valeur par rapport à la hauteur de la police utilisée. 1em correspond à 100% de la taille en cours de la police, 1.2 em à 120 %, 0.8 em à 80%.
rem
(root em)
Contrairement au em, qui peut être différent pour chaque élément, le rem est constant tout au long du document car la taille de l'élément (caractères, espacements, hauteur de ligne, etc.) dépendra de la taille de la police précisée dans le sélecteur html (ou body).