Em tem um “problema” irritante com herança. Se um contêiner tiver um valor em específico, todos os filhos no contêiner devem usar o tamanho em de seus pais como base para a conversão de px para em. Isso pode levar a cálculos pesados e confusos se houver muitos elementos aninhados uns nos outros.
<div><!-- If you apply 1em here -->
<p>Some text</p><!-- This will be affected -->
<span>Text</span><!-- This will also be affected -->
<ul><!-- And this -->
<li>Hallao</li><!-- This also -->
</ul>
</div>Às vezes você não quer isso. Não os use em contêineres, apenas nos elementos em que você precisa deles.
<div>
<p>Some text</p><!-- Just do it here -->
<span>Text</span><!-- Or here -->
<ul>
<li>Hallao</li><!-- Or even here -->
</ul>
</div>Você terá um valor base para trabalhar e não perderá o controle de como calcular seus valores em. Claro que você pode escrever um pouco mais de CSS, ninguém morre com isso, mas as dores de cabeça são evitadas **.
** Dores de cabeça não podem ser evitadas