Aqui explica a diferença entre todas as métricas do CSS.
EM
Unidades de valores EM são as mais complicadas de se trabalhar. Ela é abstrata e arbitária. Aqui tem um exemplo, 1em
é igual ao tamanho atual da fonte do elemento em questão, ou seja, se você ainda não definiu tamanho de fonte em lugar algum na página, então ele vai automaticamente pegar o tamanho de fonte padrão do browser, que provavelmente é 16px
. Então, define-se que por padrão 1em = 16px
. Digamos que você defina na tag body { font-size:20px }
então o 1em
passará a ser 20px
. Assim que ele funciona.
Outro exemplo: Se você criar uma tag h1 { font-size: 2em; }
, o tamanho do H1 em px
vai ser 32px
caso você não tenha definido algum valor ainda no css.
Porcentagem %
Porcentagem assim como o nome diz trabalha com percentual de valor. Se um pai tiver o tamanho de 20px
, e você definir o filho com font-size:50%
ele terá o tamanho de 10px
.
O porcentual é muito bom para trabalhar com as ferramentas de crescer e decrescer o tamanho na página do texto.