Azur Web
Henrique Rodrigues
Développeur Web

Connaître les différences entre les unités les plus courantes en CSS?

CSS

Différence: px, em et rem

La première différence que nous remarquons est sans équivoque leur signification et leur rôle.
Le sigle px signifie pixel qui est une unité de taille absolue. Les sigles em et rem sont des unités relatives.

Unité relative

On dit que quelque-chose est relatif à autre chose. Pour comprendre cette notion importante nous pourrions citer l'exemple d'un salaire de 2000 euros d'un employé X. Imaginons que le salaire d'un autre employé Y soit systèmatiquement supérieur à 50% du salaire de l'employé X. Le salaire Y est donc relatif au salaire X. Il sera pour le moment de 3000 euros mais si celui de X augmente à 5000 euros celui de Y sera de 7500 euros (plus 50% de X).

Ainsi une unité relative l'est par rapport à une autre unité.

Code HTML de référence

Nous allons tester les différences à partir d'un code HTML très simple.

<body>
  <h1>Un titre</h1>
  <p>Un paragraphe</p>
</body>

Unité css px (Pixel)

L'utilisation de px est plutôt simple. On indique l'unité en pixel et cette unité ne bouge pas.

h1{
  font-size:20px;
}

p{
  font-size:16px;
}

Unité css em

Cette unité est relative par rapport à l'unité du parent.

body {
  font-size:20px;
}

h1{
  font-size:1.5em;
}

p{
  font-size:0.9em;
}

Le parent dans l'exemple est "body" qui à comme mesure "18px". Le "h1" aura une taille relative à la taille "body". Dans notre exemple il mesurera 150% du "font-size" de "body" et sera donc plus grand de 50%. Pour "p" ce sera 90% et il sera donc 10% plus petit.

Si l'on change la taille de "body", les tailles de "h1" et de "p" vont augmenter ou diminuer automatiquement par rapport à "body".

Unité css rem

Pour rem, le principe est identique mais la taille sera relative non pas au parent le plus proche mais à la taille racine du document.

Email
Cela ne fontionne pas.