em é, simplesmente, o tamanho da fonte. Ou seja, no exemplo abaixo:

.patinho {
	font-size: 15px;
	padding: 2em;
}

o padding é o mesmo que 2 * 15. Ou seja, 30px. mesmo sem alterar o padding, você mudar o font-size para 16px, o cálculo muda para 2 * 16, resultando em um espaçamento de 32px.

já o **r**em seria referente ao tamanho do font-size da raiz do elemento. ou seja, ele ignora seu próprio font-size e usa como referência para o cálculo o font-size do html ou pseudo elemento :root.

por exemplo:

html,
:root {                                       // :root de um arquivo html é sempre html
	font-size: 14px;
}

.patinho {
	font-size: 15px;
	padding: 2rem;
}

neste caso, por estar usando unidade de medida rem, o padding fará o cálculo de 2 * 14 que resultará em um espaçamento de 28px.

.patinho {
	font-size: 15px;
	padding: 2em;
}

por padrão, o font-size de html é sempre 16px. portanto, é comum ver pessoas usando em e rem com múltiplos de 16. mas, também é comum o caso abaixo:

html,
:root {
	font-size: 62,5%;
}

.patinho {
	font-size: 15px;
	padding: 2rem;
}

neste caso, o padding será 20px, porque 62,5% de 16px (ou seja, 16 * 0.625) é 10. isso facilita o cálculo para o desenvolvimento, porque é mais fácil multiplicar por 10 do que por 16.

não existe certo ou errado, e sim qual você prefere

e por que usar?

• não vai afetar negativamente a experiência da pessoa que usa customização de tamanho de fonte (por exemplo no chrome em chrome://settings/fonts). isso é importante em acessibilidade
• facilita escalar tamanhos com media-query

próxima dúvida →

o que é sass, less e stylus?