Píxeles a em
Convierta px a em usando el tamaño de fuente de un elemento principal. em es relativo al padre inmediato: útil cuando el relleno de un botón debe escalar con el texto de su etiqueta, o una sangría de lista anidada sigue el tamaño del cuerpo local. Fórmula: em = px ÷ parentFontSizePx.
Pixels
Parent font size (px)
Result
1em
¿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.
¿Cuándo elegir otra cosa
• Cuando quieres un espaciado consistente en todo el sitio: rem desde la raíz es más simple.
• Cuando el anidamiento profundo causa errores de composición de em — prefiera rem para los márgenes.
• Cuando necesites un tamaño relativo a la ventana gráfica, utilice vw/vh.
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.
¿em para consultas de medios?
Consulta de medios en unidades con referencia histórica predeterminada del navegador (16 px), no componente principal. El diseño responsivo moderno a menudo utiliza puntos de interrupción rem o px: sepa a qué contexto apunta su hoja de estilo.
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.
¿Se cargan datos?
No. La conversión se ejecuta localmente.