About ems for font sizes

[AzizLight]

Hi everybody,
There is something I really don’t understand in CSS when using ems for font sizes.

I usually set font size of the body to 62.5% and then use em for all the other font sizes. Now look at this code:

Code:

div.post {
font-size: 1.4em;
}
div.post span.post-date {
font-size: 1.1em;
}

I would expect that the font size of the post date will be equivalent to 11px, but it’s actually equivalent to 110% of 1.4em which is bigger than 14px.

I did a little bit of research and found out that this behavious is normal, but in those circumstences, how am I supposed to set font sizes accurately? is there a trick to make all the font sizes relative to the one of the body? Or am I missing something?

[Reggie-Schultz]

This happens when you are using ems with nested elements. In your case the span is nested in the div.post. You are essentially multiplying 1.4em by 1.1em making it 1.54em in size. You will want to either explicitly name the size (11px, in this case) or figure out how to get it to 11px by "multiplying" 1.4ems. Try .8em for your span element and you should achieve your desired effect.

Reggie.

[Author]

Posts