CSS Font Size Inheritance for Header Tags

问题:

I have a page with several H3 header tags and want to increase their font size. When checking the relevant style settings in Firebug the only font size declaration is for the surrounding div element which is set to 16px. However, this 16px font size setting has been overruled but there is no reference anywhere to any other font size declaration. The style settings for the header elements contain no font size declarations. Can anyone tell me what's going on here?

回答1:

The browser applies font-sizes to header elements and in Firefox (and Chrome and I presume the others) this is set in em. It comes from a 'system' stylesheet. See this from the Firebug inspector:

Each header has a different font-size set:

• h1 - 2em
• h2 - 1.5em
• h3 - 1.17em
• h4 - 1em
• h5 - 0.83em
• h6 - 0.67em

Note that to see these styles you have to select 'show user agent' CSS from the 'styles' dropdown:

So, you have a parent container at 16px (in fact, that is the browser default font-size anyway), so the <h3> at 1.17em would be 1.17 * 16 = 18.72px.

If you explicitly set your <h3> to be 1em in your stylesheet then it would be the same size as the parent.

This fiddle shows each header being affected by a parent container with different font-sizes:

Fiddle

回答2:

I can't understand your problem completely, maybe it was better if you copy your code here. but i general your code should be like this for div or H3 elements.

<div class="classZ">some text</div>
<h3>some header</h3>

H3 {
     font-size: 18px;
}

div.classZ {
     font-size: 10px;
}