Using relative instead of fixed size in CSS

Question

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


        

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)