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.

http://jsfiddle.net/SBAHa/1

try making them important by putting !important;.. This will override the default values.. — Hiren Pandya
– Hiren Pandya, Commented Apr 17, 2013 at 12:01
!important is a very horrible hack for CSS, please don't use that. Defeats the point of proper css coding completely. — ASouthorn
– ASouthorn, Commented Apr 17, 2013 at 12:04
Are you able to provide us with a jsfiddle, or provide more code. As what you are trying to do is correct in theory, but there may be a mistake elsewhere leading to this error. — ASouthorn
– ASouthorn, Commented Apr 17, 2013 at 12:07
That is not possible. em quantities are relative to the element's own font size, except if used on its own font size in which case it's relative to its parent's font size. — BoltClock
– BoltClock, Commented Apr 17, 2013 at 12:16

ASouthorn · Accepted Answer · 2023-10-25 11:25:06Z

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?

Ana Sampaio · Accepted Answer · 2013-04-17 12:11:37Z

1

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

answered Apr 17, 2013 at 12:11

Ana Sampaio

3511 gold badge3 silver badges8 bronze badges

2 Comments

MDC Over a year ago

I get how it works but if I give the same styling to different elements and put them both in the same parent they have to be displayed the same way, not?

Arkana Over a year ago

@user2287715 Please, put these comments (and the jsfiddle) as new edit in your question :)

Collectives™ on Stack Overflow

Use of em for headers

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related