Des pixels pour eux
Convertissez px en em en utilisant la taille de police d'un élément parent. em est relatif au parent immédiat - utile lorsque le remplissage d'un bouton doit être mis à l'échelle avec le texte de son étiquette ou qu'un retrait de liste imbriquée suit la taille du corps local. Formule : em = px ÷ parentFontSizePx.
Pixels
Parent font size (px)
Result
1em
Comment convertir des px en em
1. Identifiez la taille de police de l'élément parent en px (par exemple 18 px).
2. Entrez la valeur px à convertir (par exemple, espacement des lettres de 9 px).
3. Lisez le résultat (9 ÷ 18 = 0,5 em).
4. Appliquer dans CSS sur l'élément enfant limité à ce contexte parent.
Exemples de Px à em
Rembourrage des boutons
Police parente 16 px ; remplissage vertical 8 px → 0,5 em. Échelle si le parent devient 18 px sur les grands écrans.
Titre imbriqué
Police de section 20 px ; sous-titre 24 px design → 1,2 em par rapport à la section, pas à la racine.
Alignement des icônes
Icône en ligne de 14 px avec ligne de texte de 16 px → zone d'icône de 0,875 em alignée sur les métriques de texte.
Quand convertir px en em
• Lorsque les éléments internes des composants doivent évoluer avec les changements de taille de police locale.
• Lorsque vous stylisez du texte enrichi où les titres se trouvent dans des conteneurs de tailles différentes.
• Lorsque l'ancien CSS les utilisait et que vous mappiez de nouvelles conceptions px dans le même système.
Quand choisir autre chose
• Lorsque vous souhaitez un espacement cohérent à l’échelle du site, rem à partir de la racine est plus simple.
• Lorsque l'imbrication profonde provoque des bogues aggravants, préférez rem pour les marges.
• Lorsque vous avez besoin d'un dimensionnement relatif à la fenêtre d'affichage, utilisez vw/vh.
Éviter les pièges aggravants
Les menus profondément imbriqués avec une taille de police : 0,9 em à chaque niveau réduisent le texte de manière inattendue. Préférez rem pour la taille de police aux niveaux structurels ; utilisez-les pour un remplissage local lié à un parent. Documentez les hypothèses des parents dans les jetons de conception.
em pour les requêtes des médias ?
Les unités em de requête multimédia sont historiquement référencées par défaut du navigateur (16 px), et non du composant parent. La conception réactive moderne utilise souvent des points d'arrêt rem ou px : sachez quel contexte cible votre feuille de style.
Questions fréquentes
Quelle est la différence entre em et rem ?
em fait référence à la taille de police parent ; rem fait référence à la taille de police racine (html) uniquement.
Pourquoi les em imbriqués sont-ils composés ?
Chaque niveau se multiplie : 1,2 em à l'intérieur de 1,2 em parent = 1,44 × racine si les deux s'appliquent aux chaînes de taille de police.
Formule?
em = px ÷ parentFontSizePx. Utilisez toujours la taille de police calculée du parent direct.
Un rembourrage dedans ?
Oui — remplissage/marge à l'échelle em avec la propre taille de police de l'élément (pour la marge/remplissage, la spécification utilise la taille de police de l'élément).
Quand sont-ils nés ?
Traditionnellement « largeur du M majuscule » en caractères métalliques ; maintenant défini par rapport à la taille de la police dans CSS.
Les données sont-elles téléchargées ?
Non. La conversion fonctionne localement.