Em
é uma unidade relativa de medida, ou seja 1em
pode ter tamanhos diferentes dependendo do contexto.
O valor default
de 1em
é igual ao da font-size
do pai do elemento.
Ex
<!DOCTYPE html>
<html>
<head>
<title>Em</title>
</head>
<style>
body{
font-size: 16px;
} }
p.t1{
font-size: 1em;
}
p.t2{
font-size: 1.5em;
}
p.t3{
p.t3{ font-size: 3em;
}
p.t4{
font-size: 5em;
}
</style>
<body>
<div>
<p class="t1">Teste 1</p>
<p class="t2">Teste 2</p>
<p class="t3">Teste 3</p>
<p class="t4">Teste 4</p>
</div>
</body>
</html>
A vantagem é que dessa maneira se mantém a proporção das fontes, se for necessário mudar o tamanhõtamanho, só mudariose mudaria a em uma única linha.