Conversor de PX a EM
Convierte valores en píxeles a unidades em relativas al tamaño de fuente del elemento padre, o em de nuevo a píxeles. Pega una lista entera de valores, consulta el porcentaje y el rem equivalentes y calcula el tamaño real del padre cuando los ems están anidados.
Última actualización:
Un valor, o varios separados por comas o espacios.
El font-size del elemento padre (16px por defecto en el navegador).
Cada tamaño em se multiplica: 16px × 1.25 × 0.875 = padre de 17.5px.
Cómo usar Conversor de PX a EM
- Elige la dirección: PX → EM o EM → PX.
- Introduce un valor o una lista, como 12, 14, 18, 24.
- Indica el tamaño de fuente del padre en px (16px si el padre usa el valor predeterminado del navegador).
- Si el propio padre tiene un tamaño en em, marca la casilla de anidamiento y escribe los valores em de los ancestros.
- Copia el resultado o descarga las tablas en CSV.
Fórmula de PX a EM
em = px ÷ tamaño de fuente del padre y px = em × tamaño de fuente del padre. Cuando los ems están anidados, el tamaño de fuente del padre es a su vez el producto del tamaño raíz y del valor em de cada ancestro: 16px × 1.25 × 0.875 = 17.5px.
PX a EM con una base de 16px
| px | em | px | em | px | em |
|---|---|---|---|---|---|
| 8px | 0.5em | 16px | 1em | 28px | 1.75em |
| 10px | 0.625em | 18px | 1.125em | 32px | 2em |
| 12px | 0.75em | 20px | 1.25em | 36px | 2.25em |
| 13px | 0.8125em | 22px | 1.375em | 40px | 2.5em |
| 14px | 0.875em | 24px | 1.5em | 48px | 3em |
| 15px | 0.9375em | 26px | 1.625em | 64px | 4em |
Cuándo usar em
- Espaciado de componentes: el padding y los márgenes en em crecen con el propio texto del componente, así que un botón se mantiene proporcional con cualquier tamaño de fuente.
- Media queries: los puntos de corte basados en em (p. ej.,
@media (min-width: 48em)) siguen el tamaño de fuente predeterminado del usuario. - Evita el anidamiento profundo en los tamaños de fuente: usa rem cuando quieras un tamaño predecible en cualquier parte de la página.
Preguntas frecuentes
¿Cómo convierto px a em?
Divide el valor en píxeles entre el tamaño de fuente del elemento padre: em = px ÷ tamaño de fuente del padre. Con los 16px predeterminados, 24px = 24 ÷ 16 = 1.5em.
¿Cómo convierto em a px?
Multiplica: px = em × tamaño de fuente del padre. Por ejemplo, 0.875em dentro de un padre de 16px son 14px.
¿Cuál es la diferencia entre em y rem?
em es relativo al tamaño de fuente del padre del elemento (para font-size) o del propio elemento (para otras propiedades como padding), así que se multiplica al anidarse. rem siempre es relativo al tamaño de fuente del elemento raíz html, así que 1rem es igual en toda la página.
¿Por qué se multiplican los valores em anidados?
Cada tamaño de fuente en em se calcula a partir de su padre, así que una lista de 1.25em dentro de un contenedor de 1.25em mide 1.25 × 1.25 = 1.5625 veces el tamaño raíz. Marca la opción de anidamiento para calcular el tamaño real del padre a partir de una cadena de valores em de los ancestros.
¿Cuántos px es 1em?
1em equivale al tamaño de fuente calculado del elemento padre. En un navegador con la configuración predeterminada y sin cambios de CSS, son 16px.
¿El em es relativo al padre para padding y margin?
No. Para propiedades distintas de font-size, em es relativo al tamaño de fuente calculado del propio elemento. Si un elemento tiene font-size: 20px, entonces padding: 1em son 20px.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →