Getting around Em inheritance

Em has a annoying "problem" with inheritance. If a container has a specific em value, all children in the container must use their parents em size as a base for converting from px to em. This can lead to unwieldy and confusing calculations if there are lots of elements nesting within each other.

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

Sometimes you don't want that. Don't use them on containers, only elements you need them on.

<div>
  <p>Some text</p><!-- Just do it here -->
  <span>Text</span><!-- Or here -->
  <ul>
    <li>Hallao</li><!-- Or even here -->
  </ul>
</div>

You'll have one base value to work from and won't lose track of how to calculate your em values. Sure you might write a bit more CSS, no one dies from it but headaches are prevented**.

**Headaches may not be prevented