HTML and CSS Reference
Figure 11-3 A version of the Cool Shoes & Socks page viewed in Opera Mobile Emulator with the body font increased
to 1.2 em.
Percentages Versus Ems
If relative units, such as ems, work in the same way as percentages, why choose ems?
When you specify a font-size using percentages or ems, 1 em is the equivalent of 100%, 0.5 em is the equivalent
of 50%, and so on. Ems and percentages work in the exact same way when applied to font-size . However, when
used on other properties such as padding and margin , they differ.
Ems are always relative to an element's font-size , whereas percentages are relative to another value, such as the
height and width dimensions of an element. Consider the following CSS as an example:
The calculated padding-left is 16 px because 1 em is relative to the font-size multiplied by one, which is
16 px. A padding-left of 2 em creates a calculated padding-left of 32 px and so on.
In this example, the padding-left is changed to a percentage, so it relates to the width of the element instead,
and the calculated padding-left is therefore 200px.
Because properties such as padding and margin better relate to the size of text, it is best to use ems for font-
size . When I scaled up the font size between Figure 11-2 and Figure 11-3, the padding and margins scaled also,
aiding the readability of the page.
When working with relative units and calculated values, rather than doing all of the calculations yourself, you can
use your browser's web developer tools to find the calculated value of any element. Please refer to the sidebar
“Working with Relative Units” in Chapter 4.
You may also like to refer to Chapter 4's description of the Rem unit, which always inherits font-size from the
<html> element, making dealing with inheritance easier. Unfortunately, at the time of writing, Rem doesn't have
enough browser support to make it useful in a real-world website. It will almost certainly be the unit used for font-
size in the future though.