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 id="pixels">
<p>The font size in this paragraph is 14px. It's not affected by its parent.</p>
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 .
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
Search WWH ::

Custom Search