Des pixels pour eux
Convertissez px en em en utilisant la taille de police d'un élément parent.
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.
É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.
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.