[mrsminkie]

Hi,

I'm using em for font size, line-height etc.... However, I've noticed that if I set my <p> font to 0.8em, and then <a> font at 0.8em, the <a> font is smaller. To compensate I'm having to make the <a> font 1em to be the same size as the 0.8em <p>.

Where am I going wrong here please?

thanks

[ElanMan]

That's because em values refer to the font-size of the parent element.
1 em would make the <a> have the same size font as its parent, regardless of what the parent's em value was.
The parent's em value would refer to its parent's font-size.
If you get me

[mrsminkie]

ElanMan, on 06 January 2010 - 09:10 PM, said:

That's because em values refer to the font-size of the parent element.
1 em would make the <a> have the same size font as its parent, regardless of what the parent's em value was.
The parent's em value would refer to its parent's font-size.
If you get me

Hi, Yes I understand. I'm reducing the font size to 80% of it's parent.... As far as hierarchy is concerned - is each div within a div a child of it's parent...?? Excuse my terminology!

[Wickham]

Assume these styles:-

body { font-size: 1.0em; }
p { font-size: 0.8em; }
a { font-size: 0.8em; }

and this markup where the a tag is inside the p tag:-

<p>Text <a href="page2.html">Page 2</a></p>

The p tag reduces font size to 0.8em and the a tag reduces that by a further 0.8em so the link text is 0.8*0.8 = 0.64em.

It only applies where the tag with a font-size in em is inside another tag with a font-size in em, so if you have nested divs with the above styles, they will not affect the situation, but this would:-

div { font-size: 0.8em; }

<div id="content">
<div>Something inside</div>
</div>

Then each div would apply 0.8em so the nested div would be 0.64em; but coding the div tag with a font-size in em is unusual.