0

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 font-size in px (that means font-size of body not wrap).

TylerH
  • 20,799
  • 66
  • 75
  • 101
vinay
  • 999
  • 2
  • 10
  • 19
  • If you want to use `em` measurements, why aren't you using them everywhere? ie. Why are you setting your `body` font size to 10px (which is far too small on my screen for instance). – Matthew Scharley Sep 04 '09 at 06:03
  • @Matthew it's almost universal that if you plan on using relative font sizes, your baseline should be 10px because it makes the math for calculating everything else much simpler. Even if all the text ends up being 1.2 or larger. – Rex M Sep 04 '09 at 06:15
  • 1
    What evidence do you have that using 10px is "almost universal"? That seems like a very odd thing to do. – Bryan Oakley Sep 04 '09 at 14:53
  • 2
    There is nothing even remotely universal about that. It's one method, but not a very good one in my mind. Why would you use a base font size that has no particular relation to either your intended font size or a reasonable line-height? I always use relative font sizes, and it requires a lot of extra math to keep the baseline under control, but it's well worth it for the flexibility of the result. I recommend this article for getting started: http://24ways.org/2006/compose-to-a-vertical-rhythm There is no way around the extra math as you want in your example. You need 1.666em to get 20px. – Miriam Suzanne Sep 04 '09 at 19:00

2 Answers2

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.

Rex M
  • 142,167
  • 33
  • 283
  • 313
0

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)

knittl
  • 246,190
  • 53
  • 318
  • 364
  • Thanks for your reply, is em calculated parent font size or parent that has font size in px. Because some where i read 1em = 1/parent font-size in PX. – vinay Sep 07 '09 at 03:59
  • 1em is the width of the letter “M” – knittl Sep 07 '09 at 05:35
  • That's correct, but width of that 'M' depends up on font size. Then 1em = 1/parent font-size in PX – vinay Sep 07 '09 at 06:20
  • why 1/font-size oO? 1em = width of letter M in font-size of parent element – knittl Sep 07 '09 at 06:25
  • ya that's only my question. Is 1em is width of letter M in font-size of parent element OR is it width of letter M in font-size of parent element/grandparent (in case font-size is not defined in PX) which has font-size in PX. – vinay Sep 07 '09 at 06:46
  • em is derived from the first element with a set size (by default, body gets a size set from the browser). then it calculates all font sizes from body down to your element. if you don’t specify a font-size it is the same (=1em) as the parent element – knittl Sep 07 '09 at 07:03