No desenvolvimento web, px, rem e em são as unidades de comprimento mais comuns em CSS. Todas definem tamanho, mas a referência é diferente, então o resultado pode mudar.
O que é px
px é uma unidade fixa baseada em pixels. É intuitiva e fácil para tamanhos precisos, por exemplo bordas, tamanho de ícone, elementos pequenos de interface.
O que é em
em é uma unidade relativa ao tamanho da fonte do elemento pai. Muda com o tamanho do pai, então em layouts aninhados pode parecer maior ou menor que o esperado.
O que é rem
rem é uma unidade relativa ao tamanho da fonte raiz (html). A referência é consistente em todo o site, então é muito usada em design responsivo e acessibilidade.
Quando usar qual
px serve quando você precisa de tamanho fixo. rem serve quando a consistência importa: tamanho de fonte global, espaçamento, gaps de layout. em serve quando algo deve escalar com o pai, por exemplo texto dentro de um botão ou componente.
Prática comum
Hoje muitas equipes usam rem para texto e espaçamento e px para coisas bem pequenas como bordas.
Por que parece confuso
À primeira vista as unidades parecem iguais, mas a referência é diferente, então o resultado pode mudar bastante. em especialmente pode acumular tamanho pela aninhamento de pais.
Conclusão
px, rem e em têm prós e contras. Decida se você precisa de tamanho fixo, relativo ao pai ou referência em todo o site. O conversor de unidades do EveryUtil ajuda a comparar valores em px e rem.