CSS h1 tag with span - font-size accumulates; why?

Question

I have h1 tags with a span to have the first word in 1.4em and the rest in 1.2 em. If I write

.item.large h1 {
font-size: 1.4em;
padding-top: 0.3em;
margin-left: 0.4em;
}

.item.large h1 span {
font-size: 1.2em; // why is this not taken into account?
}

the words in the span are actually even larger than 1.4em, not smaller! Why is this unexpected growth happening and how do I style part of h1 tags correctly? Thanks!

Edit: If I use 0,857142857142857em for the span, I visually get 1.2em height, but that's not the way to do it, I'm sure...

Answer 1

em size unit is relative to the parent element. You can use rem unit to be relative to the document's main unit size, so to the constant one.

For the more information see http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

因为em是一个相对的度量单位（对其父级）。

Answer 3

You can use this code on your CSS:

#title h1{
display: block;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#title h1>span {
display: block;
font-size: 11px;
color: #fff;
}

And in your HTML code:

<h1 id="title">My Title<br><span>My Second Title</span></h1>