How to use em perfectly without getting nested issue?

Question

How to use em perfectly without getting nested issue?

How to get perfect needed size for every needed element?

If i use #Wrapper (font-size:62.5%) because it's easy to calculate font sizes.

How to deal with nested issues of font-size and line-height?

Answer 1

puts on flameshield

I've been using the 62.5% + em method for 3 years but I just made the switch back to pixels.

Why?

• Pixels are a relative unit
• There's less and less IE6 users ( meaning more people are able to resize properly now and you don't have to worry about IE6's caveats as much )
• Modern browsers having better support for zoom in/out
• You save time - everyone understands pixels and there's no math involved in regards to inherited em font size and calculating relative to that

With that said:

• Do still use pt for printing because it's more reliable

If you still want to use ems that's fine. The best strategy, as counter-intuitive as it sounds is to make more specific rules so the em font size doesn't get inherited by everything.

Instead of:

body { font:62.5% arial; }
div#content { font-size:1.2em; }
p { font-size:0.9em; } /* have to calculate to try to get 11 px */

Do:

body { font:62.5% arial; }
div#content p { font-size:1.1em; }

Of course there exist utilities to do the pixel calculation for you ( an entire stylesheet or web page ) in ems but to me that's just a complete waste of time.