Backgrounds, Borders, and More - Jump Start CSS - page 73

.example {
padding: 10em;
}
A single em is always equal to whatever the value is of the font-size property on the ele-
ment to which the em unit is applied. The font-size property defines the size of the font,
or text, on the element. Take the following example HTML:
<div class="box">
<p>Let's em-phasize this point.</p>
</div>
And here's the accompanying CSS:
.box {
font-size: 20px;
padding: 1.5em;
}
p {
font-size: 14px;
padding: 2em;
}
In this example, the 1.5em that's defined on the .box element will be equal to
30px—remember, a single em is equal to whatever the font size is set to, making it 20px plus
half of 20px. But on the child paragraph element ( <p> ), the value of em will be 28px. This
is because the font size is set on that element at 14px, making the padding equal to 14px
doubled.
Following so far? If you're still confused, Table 3.1 may help you grasp how ems are related
to font size.
Table 3.1. Ems related to font size in pixels
14px 15px 16px 17px 18px
1em 14px 15px 16px 17px 18px