Unités de mesure

Index général
Introduction au Web Page Web de base Introduction à HTML Introduction à CSS Les tableaux
Les images Les listes Les hyperliens Les couleurs Les attributs ID et CLASS
Les éléments DIV et SPAN Éléments structurants Mise en page en colonnes Éléments de types block et inline Le modèle de boîte CSS
Les unités de mesures CSS Les sélecteurs CSS Les grilles CSS Introduction aux formulaires Suppléments pour PFI

Dernière mise à jour le 30 octobre 2022

Les unités de mesures CSS

Il existe plusieurs unités pour exprimer la dimension d'un élément en CSS.

À chaque fois qu'une dimension est exprimée, la valeur numérique doit être suivie immédiatement (pas d'espace) du nom de l'unité comme dans 20px ou 1.2em, sauf si ce nombre est 0.

Il existe deux types d'unités de mesure : absolues et relatives.

Unités absolues

Ces unités expriment des dimensions réelles.

Le problème est que la taille des écrans est tellement variable qu'il est très difficile de garantir un affichage correct.

C'est pourquoi à part le pixel l'usage de ces unités est peu répandu.

Voici quand même les unités absolues disponibles :

UnitéDescription
cmCentimètres
mmMillimètres
inPouces
pxPixels
ptPoints (1/72")
pcPicas (12 pt)

Unités relatives

Les unités relatives définissent une taille par rapport à une autre.

L'utilisation d'unités relatives permet de conserver l'aspect d'une mise en page sur des écrans de tailles différentes.

Les unités couramment utilisées sont les suivantes :

Unité Description
em Relative à la taille de la police de l'élément courant (ex : 1.5em signifie une fois et demie la taille de la police courante).
% Relative à la taille de la police de l'élément courant (ex : 150% signifie une fois et demie la taille de la police courante).
rem Relative à la taille de la police de l'élément racine.
vw Relative à 1% de la largeur de la fenêtre du navigateur. (*)
vh Relative à 1% de la hauteur de la fenêtre du navigateur. (*)

* Ces unités ne sont pas encore disponibles avec tous les navigateurs.

Exemple 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Unités relatives</title>
</head>
<body style="font-size: 15px;">

  <p>Texte de 15px.</p>
  
  <p style="font-size: 25px;">
    Texte de 25px.
  </p>

  <p style="font-size: 2em;">
    Texte de 30px (2 fois la taille courante).
  </p>
  
  <div style="font-size: 20px;">
    <p style="font-size: 2em;">
      Texte de 40px (2 fois la taille courante).
    </p>
  </div>

  <div style="font-size: 20px;">
    <p style="font-size: 200%;">
      Texte de 40px (200% de la taille courante).
    </p>
  </div>

  <div style="font-size: 20px;">
    <p style="font-size: 2rem;">
      Taille de 30px (2 fois la taille de la racine).
    </p>
  </div>

</body>
</html>
Je teste