Geek Answers Handbook

Using em for headers

I am new to using em. I have always used px so far, but it's time to move on. I am stuck with my headlines. I have H2 and H6 with the same style

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

When I put both headers in the same parent, they are displayed in a different size. How is this possible? Whether they are relative to the parent or they refer to the default font size itself.

thanks

http://jsfiddle.net/SBAHa/1

+6
source share
2 answers

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

<a> inside H2 has font size styles attached to it, while inside inside H6 there isn’t. If you apply 1.2em style to <a> instead of headers, this will work.

Essentially do the following:

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

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

+1
source

The actual size of em elements is calculated relative to the font size of its parent element.

Take a look at this wonderful article that helped me figure out the relative measures: http://alistapart.com/article/fluidgrids

0
source

More articles:


All Articles