Use of em for headers

Question

I'm new to the use of em. I've always used px so far but it's time to move on. I'm stuck with my headers. I've got an H2 and an H6 with the same styling

font-size:1.2em;
line-height:1.2em;

When I put both headers in the same parent element they are displayed in a different size. How is that possible? Are they relative to the parent or are they relative to the default font-size of themselves.

Thanks

http://jsfiddle.net/SBAHa/1

Answer 1

Based on the link you sent (joets.be/test/index.html), the reason this is happening is because you have an anchor tag inside the heading elements.

The <a> inside the H2 has font sizing styles attached to it, whereas the one inside the H6 does not. If you apply your 1.2em styling to the <a> instead of the headings, then that will work.

So essentially, do this:

h2 a, h6 a{ font-size:1.2em; line-height:1.2em; }

Edit: I've looked at the css file itself, can you just remove the "h2 a" from line 339?