Solucionado
Olá,
Considere o exercício https://cursos.alura.com.br/course/avancando-html-css/task/6114. No trecho de código abaixo, o font-size é igual a 1.5em.
.leia-mais {
padding: .5em;
margin: 1em;
display: block;
font-size: 1.5em;
text-align: center;
background-color: #E6E7E8;
}O font-size é relativo a qual tamanho de fonte no código do projeto? Fiquei na dúvida porque os pais também têm tamanho relativo definido.
Olá Roger, Tudo bem?
A unidade de medida em é baseada no tamanho da fonte que está aplicada ao elemento atual.
Logo, suponhamos que você não tenha feito reset do seu CSS e o navegador aplicou tamanho 16px para todos os seus parágrafos, ao aplicar a medida 2em como tamanho de fonte em um parágrafo ele irá renderizar 32px.
O em é interessante porque é uma medida relativa, na prática isso quer dizer que se todas as suas fontes estiverem definidas a partir de ems focadas em um único valor (ex. se você tiver aplicado um css reset por exemplo), ao alterar este valor você pode mudar o tamanho de todas as fontes de sua página.
É importante notar que esta unidade pode ser aplicada a qualquer propriedade que aceite unidades.
Por exemplo, você pode aplicar 40em a largura de um parágrafo para limitar o número de caracteres que aparecem em cada linha, lembrando que isso não quer dizer que será limitado a 40 caracteres, visto que 1em é exatamente a largura da letra m da fonte usada, mas ao espaço proporcional a 40 caracteres, caracteres como a letra i e l por exemplo ocupam menos espaço.
Deixo aqui para você os links para a documentação da W3C e para a MDN (Mozila developer network)
Fala Roger!
Caso surja alguma outra dúvida relacionado as medidas do CSS, veja esse post no nosso blog!
Abraços!