CODEWITHSUNDEEP
css
azangru
azangru

Reputation: 2738

In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

A certain element in my HTML has a parent element with font-size: 0, but then it has its own CSS rules with font-size: 1.9em. I can verify this in Chrome’s computed properties panel. I can also see that the style with font-size: 0 is crossed out, so it's overridden. And yet, to my great surprise, the resultant calculated font-size is still 0. How can this be possible?

(The element does not have any inline styles, if anyone is wondering)

enter image description here

Upvotes: 0

Views: 14

Answers (1)

Hiszpan
Hiszpan

Reputation: 116

If you create parent element with a font size 0px every tags inside which has font-size specified in emphasis like 1.9em it will calculate 0*1.9 = 0px.

You may want to use root element font size (specified in the html tag) font-size:1.9rem;

When the html tag has font size set for 10px it will produce 1.9*10=19px.

Upvotes: 1

Related Questions