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.
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.