Conversor de px a em

Qué es em

em es una unidad relativa al font-size de un elemento. Cuando aplicás padding: 1em, el padding es igual al tamaño de fuente del elemento (o del padre, en algunos contextos). En contraste con rem, que siempre es relativo al root, em depende del contexto donde lo usés.

Fórmula

em = px / font-size del padre

Si el padre tiene font-size: 16px, entonces 24px = 1.5em. Si el padre tiene font-size: 20px, entonces 24px = 1.2em.

Cuándo conviene em

El uso clásico de em es para componentes que tienen su propia escala tipográfica. Un botón, por ejemplo: si definís el padding en em, cuando hagas el botón más grande aumentando font-size, el padding crece proporcionalmente. Si lo definís en rem o px, el padding queda fijo y la proporción se rompe.

.btn {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* escala con font-size */
}
.btn--lg {
  font-size: 1.25rem; /* el padding crece automáticamente */
}

El problema de la composición

em compone: un em dentro de otro multiplica. Si tenés section { font-size: 1.2em } y dentro p { font-size: 1.2em }, el párrafo termina con 1.44em del root. Anidá tres niveles y los tamaños se vuelven impredecibles.

Por eso muchos sistemas modernos prefieren rem para tipografía y reservan em para spacing dentro de componentes específicos donde el comportamiento de "escala con el contexto" es exactamente lo que querés.

em para media queries

Las media queries con em (en vez de px) responden mejor al zoom de texto del usuario. Si alguien aumenta el font-size del browser, los breakpoints en em se disparan más temprano, manteniendo el layout responsive incluso para usuarios con zoom. Es un detalle de accesibilidad fino, pero notable.

Casos de uso prácticos

• Botones: padding en em para que escale con el size variant.
• Inputs: misma lógica.
• Cards: padding interno proporcional al contenido.
• Listas anidadas: indentación que respeta el tamaño del item padre.
• Iconos inline: width: 1em hace que el ícono coincida con el tamaño de la línea de texto.

Cuándo NO usar em

Para tipografía global (h1, body, etc.): rem es más predecible. Para spacings de página (gaps de grid, margins de section): rem también. em brilla en componentes auto-contenidos, no en macro-layout.

Resumen

Usá rem como default. Usá em cuando querés que algo escale con el contexto (typeface) del elemento contenedor. Y siempre verificá computed values en DevTools cuando algo no encaja.