Píxeles a em
Convierta px a em usando el tamaño de fuente de un elemento principal.
¿Cómo convertir px a em
1. Identifique el tamaño de fuente del elemento principal en px (por ejemplo, 18 px).
2. Ingrese el valor de px para convertir (por ejemplo, espacio entre letras de 9 px).
3. Lea el resultado de em (9 ÷ 18 = 0,5 em).
4. Aplicar en CSS en el elemento secundario con alcance de ese padre contexto.
Ejemplos de px a em
Relleno de botones
Fuente principal 16 px; relleno vertical 8 px → 0,5 em. Se escala si el padre llega a 18 px en pantallas grandes.
Encabezado anidado
Fuente de sección 20 px; subtítulo Diseño de 24 px → 1,2 em en relación con la sección, no con la raíz.
Alineación de íconos
Icono en línea de 14 px con línea de texto de 16 px → 0,875 em el cuadro de ícono se alinea con las métricas de texto.
¿Cuándo convertir px a em
• ¿Cuándo los componentes internos deben escalar con el tamaño de fuente local cambios.
• Cuando aplica estilo a texto enriquecido donde los encabezados se ubican dentro de contenedores de diferentes tamaños.
• Cuando CSS heredado los usa y asigna nuevos diseños de px al mismo sistema.
Evitar errores de composición de em
Menús profundamente anidados con tamaño de fuente: 0,9 em en cada nivel reducen el texto inesperadamente. Prefiera rem para el tamaño de fuente en niveles estructurales; Úselos para el relleno local vinculado a uno de los padres. Documente las suposiciones principales en tokens de diseño.
Preguntas frecuentes
¿Cuál es la diferencia entre em y rem?
em hace referencia al tamaño de fuente principal; rem hace referencia únicamente al tamaño de fuente raíz (html).
¿Por qué los em anidados se componen?
Cada nivel se multiplica: 1,2 em dentro de 1,2 em parent = 1,44 × raíz si ambos se aplican a cadenas de tamaño de fuente.
¿Fórmula?
em = px ÷ parentFontSizePx. Utilice siempre el tamaño de fuente calculado del padre directo.
¿Relleno en em?
Sí, relleno/margen en escala em con el tamaño de fuente propio del elemento (para margen/relleno, la especificación usa el tamaño de fuente del elemento).
¿Cuándo se originó em?
Tradicionalmente "ancho de M mayúscula" en tipo de metal; ahora definido en relación con el tamaño de fuente en CSS.