CODEWITHSUNDEEP
cssfont-size
MDC
MDC

Reputation: 237

Use of em for headers

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.

http://jsfiddle.net/SBAHa/1

Upvotes: 6

Views: 666

Answers (2)

ASouthorn
ASouthorn

Reputation: 399

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?

Upvotes: 1

Ana Sampaio
Ana Sampaio

Reputation: 351

The actual size of an element’s em is computed relative to the font-size of its parent element.

Have a look at this great article that helped me understood relative mesures: http://alistapart.com/article/fluidgrids

Upvotes: 1

Related Questions