En desarrollo web, px, rem y em son las unidades de longitud más habituales en CSS. Todas fijan tamaño, pero su referencia es distinta, así que los resultados pueden variar.
Qué es px
px es una unidad fija basada en píxeles. Es intuitiva y fácil de usar para tamaños precisos, p. ej. bordes, tamaño de icono, elementos pequeños de interfaz.
Qué es em
em es una unidad relativa al tamaño de fuente del elemento padre. Cambia con el tamaño del padre, así que en maquetaciones anidadas puede verse más grande o más pequeño de lo esperado.
Qué es rem
rem es una unidad relativa al tamaño de fuente de la raíz (html). La referencia es coherente en todo el sitio, así que se usa a menudo en diseño responsive y accesibilidad.
Cuándo usar cuál
px encaja cuando necesitas un tamaño fijo. rem encaja cuando importa la coherencia: tamaño de fuente global, espaciado, huecos de maquetación. em encaja cuando algo debe escalar con su padre, p. ej. texto dentro de un botón o componente.
Práctica habitual
Últimamente muchos equipos usan rem para texto y espaciado y px para cosas muy pequeñas como bordes.
Por qué puede resultar confuso
Al principio las unidades parecen similares, pero la referencia es distinta y el resultado puede cambiar mucho. em sobre todo puede acumular tamaño por el anidamiento de padres.
Resumen
px, rem y em tienen cada uno pros y contras. Decide si necesitas tamaño fijo, relativo al padre o referencia global del sitio. El convertidor de unidades de EveryUtil puede ayudar a comparar valores en px y rem.