Middle+

Quelle est la différence entre rem et em?

sobes.tech IA

Réponse de l'IA

rem et em sont des unités de mesure relatives en CSS, utilisées pour définir des tailles, mais qui diffèrent par leur base de référence.

em — une unité relative basée sur la taille de la police de l'élément parent. Par exemple, si la taille de police du parent est : 16px, alors 1em = 16px. Si dans un élément enfant la taille de police est : 1.5em, sa taille sera de 24px.
rem — une unité relative basée sur la taille de la police de l'élément racine (généralement <html>). Par exemple, si <html> a une taille de police : 16px, alors 1rem est toujours égal à 16px, indépendamment de l'imbrication.

Différence principale :

em dépend du contexte (de l'élément parent), ce qui peut entraîner une cascade dans la multiplication des tailles en cas d'imbrication.
rem est toujours fixe par rapport à la racine, ce qui facilite la gestion des tailles et les rend plus prévisibles.

Exemple :

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px dans .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Utilisez rem pour les tailles globales afin d'éviter des changements inattendus, et em lorsque vous souhaitez faire évoluer la taille par rapport au contexte local.

Précédent Suivant