Boa noite, para mim ficou claro que na definição de fontes usar % ou "em" da no mesmo, mas no caso do width de uma div, por que % seria diferente de "em" nesse caso? Não ficou claro para mim.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa noite, para mim ficou claro que na definição de fontes usar % ou "em" da no mesmo, mas no caso do width de uma div, por que % seria diferente de "em" nesse caso? Não ficou claro para mim.
Boa noite Bruno,
em é uma medida relativa em relação ao font-size do elemento pai, isto é, se uma div tem width: 2em, significa que ela tem um tamanho 2x maior que o font-size do pai. E essa multiplicação segue de pai para pai, até a raiz do documento <html>, que por padrão tem um font-size de 16px (na maioria dos navegadores).
Dessa forma, essa página
<html>
<body>
<div style="font-size: 2em">
<div style="font-size: 3em">
<div style="width: 2em; background-color: #ff0000">
oi
</div>
</div>
</div>
</body>
</html>Deveria ter largura igual a esta
<html>
<body>
<div style="width: 192px; background-color: #ff0000">
oi
</div>
</body>
</html>Já que 16 x 2 x 3 x 2 = 192. Note que apesar da largura igual, o tamanho do texto difere, pois não estamos definindo font-size no segundo caso.
No caso do %, estamos falando de uma medida relativa ao tamanho do container no qual o elemento está inserido, sem relação com o font-size dos pais.