problem with em unit

Question

Hi,

I want to use relative size instead of fixed size. I want to use em.

My CSS is:

body{
     font:10px;
}

#wrap {
   font:1.2em;
}

#wrap ul li {
   padding-left:2em;
}

What is value of the li's padding in px? I would have guessed it's 2.0*10 = 20px, but it looks like it's taking 1em = 12px, I mean it taking it parent size.

I would like for it to take 1x the parent fontsize in px (that means font-size of body not wrap).

I appreciate your suggestions.

Answer 1

ems are always relative to their parent element, as you stated. Additionally, an element's non-font dimensions are always calculated relative to its font dimensions - i.e. if you say font-size:1.2em;padding:2em - that element's padding will be 2x the font size which is 1.2x the size of its next defined parent element.

The solution is to use more math. If your wrapper element is 1.2em, and you want an inner element padding to be double the baseline size, you should use t=i*x, where t is target size, i is inherited size, and x is the desired size. So for our case, 2em is the target size; 1.2em is the inherited size:

2em = 1.2em * x => x = 1.67

So padding should be 1.67em.

Answer 2

the font size of #wrap ul li is 10px*1.2em*2em, thus padding-left:24px;

it always takes the font size of the parent element (in your case #wrap)