CODEWITHSUNDEEP
htmlcss
Thom Thom Thom
Thom Thom Thom

Reputation: 1319

font-size of inline child doesn't take effect

I can set span's font-size normally.

When it's bigger than the h1's font-size, it does work:

<style>
h1 {
    font-size: 1em;
}

span {
    font-size: 2em;
}
</style>

<h1>Normal text, <span>bigger one</span></h1>

JSFiddle: http://jsfiddle.net/We9nu/

The inverse doesn't work. I've tried with "!important" too:

<style>
h1 {
    font-size: 2em;
}

span {
    font-size: 1em;
}
</style>

<h1>Bigger text, <span>normal one</span></h1>

JSFiddle: http://jsfiddle.net/FGV5Z/1/

Is it possible to do it with this HTML markup?

I've tested with Firefox and Chromium.

Thanks.

Upvotes: 0

Views: 48

Answers (2)

NativeWebs
NativeWebs

Reputation: 63

Define font size in pixels : 

<style>
h1 {
   font-size: 12px;
}

span {
   font-size: 24px;
}

inverse will also works.

Upvotes: 3

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

in the second example you need to do

h1   {  font-size: 2em; }
span {  font-size: .5em; // half of parent element }

if you set 1em in a child element you're actually defining the same font-size of the parent element, because ems are multiplying (2em * 1em is still 2em, while 2em * 0.5em is 1em as resulting font-size)

See this resource about available font units and how they work

Upvotes: 3

Related Questions