A medida de tamanho relativa em é muito útil e de melhor utilização que a medida px (pixel).
Digo isso porque essa medida se adapta melhor a diferentes resoluções e também é mais fácil manipular o tamanho das fontes de todo o site.
Então vamos ver como essa medida funciona. A medida em multiplica o valor do elemento pai, ela é muito utilizada para fontes, mas pode ser utilizado para margin, padding entre outros. Então como funciona essa multiplicação? Vamos supor que temos uma div que será o container de um elemento p, conforme exemplo a seguir:
<div>
<p>Paragrafo</p>
</div>
Agora vamos supor que a div contém uma propriedade font-size: 12px, e o elemento p contém font-size: 1em, conforme exemplo a seguir:
div {
font-size: 12px;
}
div p {
font-size: 1em;
}
Esse 1em, significa que será multiplicado 1 vez pelo valor do seu elemento pai, logo 12 vezes 1, equivale a 12px. Com isso em mente, se colocarmos o elemento p para font-size: 2em, isso será equivalente a 24px, porque será multiplicado 12 por 2.
Agora você me pergunta, e se caso o elemento pai não for definido um valor para a propriedade font-size? Caso isso não ocorra, que geralmente acontece, existe um valor padrão de tamanho de fontes que já vem pré-definido no navegador. Geralmente esse valor é 16px.
Então por padrão 1em equivale a 16px. Então vamos supor que nossa div do exemplo anterior não tenha sido definido nenhum valor para a propriedade font-size, logo nosso elemento p que contem a propriedade font-size com um valor de 1em será equivalente a 16px.
E se quiséssemos adicionar a metade do tamanho a mais para o elemento p? A metade de 1 é 0.5, logo 1.5em equivale ao tamanho original que no nosso caso é 16 mais a metade de 16 que é 8, ficando no total de 24, logo 1.5em equivale a 24px.
Mas muita atenção nisso! Não quer dizer que sempre 1.5em será equivalente a 24px, isso só irá acontecer se o elemento pai conter font-size: 16px. Se ao invés de 16px o elemento pai conter font-size: 12px, 1.5em de 12px equivale a 18px
Outra coisa que devemos ter uma atenção maior, é que o em multiplica sempre o valor do elemento pai, isso quer dizer que se tivéssemos uma div como container com font-size: 16px, e dentro dela tivéssemos um elemento p com font-size: 1.5em, e dentro do p um span com font-size: 2em, o que você acha que vai acontecer? Veja o exemplo a seguir:
<div>
<p>Texto com uma palavra <span>destacada</span></p>
</div>
div {
font-size: 16px;
}
div p {
font-size: 1.5em;
}
div p span {
font-size: 2em;
}
Primeiramente o elemento p terá o font-size multiplicado por 1.5 do seu elemento pai, logo 16 x 1.5 equivale a 24px, então o span que está dentro de p terá o font-size multiplicado por 24px, logo 24 x 2, equivale a 48px. Então nesse caso 2em do elemento span equivalem a 48px.
Converter px para em
A conversão de px (pixel) para em é muito simples, basta dividir o valor que você deseja pelo valor do elemento pai, exemplo, se queremos saber quanto que 12px em em equivalem referente a 16px que é o valor do elemento pai, basta dividir 12 \ 16 = 0.75, então 12px equivalem a 0.75em.
Se quiséssemos que nossa fonte do elemento filho equivalesse a 18px, e o seu elemento pai tem 16px de font-size. Basta dividir 18 por 16, 18 / 16 = 1.125em, esse número pode ser arredondado para 1.12em.
Dica: Alterar todas as fontes do site de uma vez só
Se todas as fontes do site utilizam a medida em, e por algum motivo você deseja diminuir ou aumentar todas as fontes do site, basta definir um tamanho de fonte para o elemento body:
body {
font-size: 16px;
}
Com isso definido, o body sempre será o último elemento pai, e por causa desse último elemento pai será feito a multiplicação conforme o valor definido a ele. Exemplo, uma div como container e um p como filho, esse p tem um fonte-size: 1.5em:
<body>
<div>
<p>Paragrafo</p>
</div>
</body>
p {
font-size: 1.5em;
}
O valor desse 1.5em será equivalente a multiplicação de todos os seus elementos pai, 1.5em equivale a 24px de 16px do seu elemento pai, que nesse caso é a div, que não tem um valor definido de font-size, mas herda esse valor do seu elemento pai que é o body, assim sendo se alterarmos o font-size do body para 14px por exemplo, o tamanho da fonte do p será alterado, agora 1.5em não equivalem mais a 24px e sim será feito uma nova multiplicação, agora será 14 x 1.5 = 21, então o elemento p será equivalente a 21px.
Então somente alterando o valor do font-size do body, será alterado automaticamente todos os tamanhos de todas as fontes do site (Caso essas fontes estejam em em).
