HTML and CSS Reference
In-Depth Information
he
font-size
property is inherited, so if a nested element uses
em
, it's calculated relative to the inherited
value. To demonstrate what this means,
em inheritance.html
in the example files for this chapter contains the
following markup:
<p>The font size in this paragraph is 0.875em.</p>
<div id="ems">
<p>The font size in this paragraph is also 0.875em, but its parent is set to 1.5em.</p>
</div>
<div id="pixels">
<p>The font size in this paragraph is 14px. It's not affected by its parent.</p>
</div>
The styles for the page look like this:
p {
font-size: 0.875em;
}
#ems {
font-size: 1.5em;
}
#pixels {
font-size: 24px;
}
#pixels p {
font-size: 14px;
}
Figure
4-2
shows the output in a browser.
Figure 4-2.
Font sizes specified in ems are relative to any inherited value
The first style rule uses a type (or tag) selector that redefines all paragraphs and sets their
font-size
property to
0.875em
. So, why is the font in the second paragraph so much bigger? This is what happens:
16px
). So, it's
•
The first paragraph's font size is reduced to 0.875 of the default size (
displayed at
14px
.
#ems
ID selector sets the
font-size
property for the
ems <div>
to
1.5em
. In other
words, it becomes one and a half times the default size, or
24px
.
•
he
ems <div>
inherits its parent's font size (
24px
), which
becomes the equivalent of
1em
. It then reduces the size to
0.875em
, or
21px
.
•
The paragraph nested inside the
