Conversor CSS px ↔ em

A diferença entre px e em não é de unidade, é de referência. Um pixel é um valor absoluto no CSS. Um em vale o font-size do elemento pai — ou do próprio elemento, quando aplicado a propriedades que não sejam font-size. Como o navegador começa com 16px por padrão, 1em costuma dar 16px na raiz, mas basta um contêiner com fonte diferente para a mesma declaração render outro tamanho.

Aqui você informa o font-size de referência e converte nos dois sentidos: digite o valor em pixels para saber quantos em ele representa, ou o contrário. Deixando a base em 16, 24px viram 1.5em e 0.875em viram 14px. Trocando a base para 20, os mesmos 24px passam a valer 1.2em — que é justamente o efeito que pega desprevenido quem aninha componentes.

Vale distinguir em de rem. O rem sempre olha para a raiz do documento, ignorando os pais, e por isso não acumula: dois níveis de 0.9em multiplicam para 0.81, enquanto dois níveis de 0.9rem continuam valendo 0.9. A regra prática que evita dor de cabeça é usar rem para tamanho de fonte e espaçamento geral, e reservar em para o que deve escalar junto com o texto do próprio componente, como o padding de um botão.