user
En CSS quelle est la différence entre em et rem ?
alphonsio

Quelle est la différence entre em et rem en CSS ?

En CSS, em et rem sont des unités de mesure relatives utilisées pour définir les dimensions et les espaces dans une mise en page web. Cependant, elles se basent sur des références différentes :

  • em est relatif à la taille de police de l'élément courant ou parent.
  • rem est relatif à la taille de police de l'élément racine (html).

Plus précisément :

  • em : Cette unité est relative à la taille de police de l'élément courant ou parent. Si aucune taille de police n'est définie pour l'élément courant, il hérite de la taille de police de son parent. Par exemple, si la taille de police de l'élément parent est de 16px, alors 1em sera égal à 16px pour cet élément. De ce fait, si vous définissez une taille de police à 2em pour un élément enfant, sa taille de police sera deux fois plus grande que celle de son parent.

  • rem : Cette unité est relative à la taille de police de l'élément racine (html). Dans la plupart des navigateurs, la taille de police par défaut de l'élément racine est de 16px. Ainsi, 1rem est toujours égal à 16px, sauf si vous modifiez explicitement la taille de police de l'élément racine. L'avantage de rem est qu'il permet d'avoir une taille de police cohérente et basée sur une seule référence, ce qui facilite la gestion des dimensions dans une mise en page.

En résumé, em est relatif à la taille de police de l'élément parent, tandis que rem est relatif à la taille de police de l'élément racine (html). Le choix entre ces deux unités dépend de la manière dont vous souhaitez gérer les dimensions et les espaces dans votre mise en page web.


Voici un exemple en ligne qui illustre bien la différence entre em et rem. On constate que dans le cas des élément em le texte est deux fois plus gros que le parent. En revanche, avec rem, le texte est deux fois plus grand que l'élément racine.

Disclaimer

This chatbot (Alphonsio) provides automated responses generated by machine-learning algorithms and relies on the accuracy of the underlying language models. While this Chatbot is programmed to provide accurate and relevant information, its information may not always be exhaustive, accurate, up-to-date or tailored to individual circumstances. It is not a substitute for professional advice or consultation with qualified experts. This chatbots and its responses are intended for informational purposes only and should not be used for commercial or business purposes. The creators of this chatbot are not liable for any damages or losses incurred as a result of using the information provided. By using our website, you acknowledge and agree to these terms. The data you submit to this chatbot is used to improve our algorithms. Under no circumstances should you submit sensitive data such as, but not limited to, personal data or passwords. The data you submit could then be made public.