css font-size inheritance not applying

Question

I have a structure like follows

<div class="panel">
    <div class="product">
        <div class="title">My little pony</div>
    </div>
</div>

and the title div has its font-size set, but so does the panel div.

.panel {
    font-size: 0.89em;
}
.product .title {
    font-size: 1em;
    font-weight: bold;
    height: 3.8em;
    line-height: 1.2em;
}

When I look at this in the browser it appears that the font-size for the panel class is applying to the title div, firebug does show the panel style as being crossed out but when toggling the font-size on the title div it makes no difference to the size.

If I toggle the panel class font-size then I can see that change that I am expecting.

What is going on here am I missing something obvious?

Note: css has been simplified

Fiddle

Answer 1

The font-size is being overridden (that's why you see it crossed out in Firebug), but it doesn't actually do anything because of the relativity of em s.

1em = the font size of the parent element. In your case, this is .panel with font-size: 0.89em . So setting .product .title 's font-size to 1em doesn't affect the outcome.

---

Formula to calculate em equivalent for any pixel value required

1 ÷ parent font size (px) × required pixels = em equivalent

(Credit: http://v1.jontangerine.com/silo/css/pixels-to-ems/ )

Per this formula, to get the desired font size you need to set it to:

1.1235955056179775280898876404494

Note: the browser can't render an umteenzillionth of a pixel so only a few decimal places are actually needed.