An em is a CSS length tied to font size. Its reference depends on the property: for font-size, 1em means the element’s inherited font size; for padding, width, border-radius, and other lengths, it means the current element’s font size. The browser turns that relative length into a computed value. section 2.2 section 2.2.1
Calculate font size before padding
Suppose the body has a 16px font. An element with font-size: 1.2em gets a computed font size of 19.2px. If it also has padding: 1.2em, that padding uses the element’s new font size, not the inherited 16px. Equal declared em values can therefore produce different computed lengths. section 2.2.1
Listing 2.4 Applying ems to font-size and padding
body {
font-size: 16px;
}
.slogan {
font-size: 1.2em; #1
padding: 1.2em; #2
background-color: #ccc;
}
Compare the two 1.2em declarations: font-size is calculated from inheritance first, then padding is calculated from the resulting font size. section 2.2.1
That dependency makes ems useful for components. Give a box padding and a border radius in ems, then change its font size: the text and surrounding shape scale together. A panel can likewise have a normal and a larger version when its internal measurements are relative to its own font size. Use rem instead for a measurement you do not want to change with that component. section 2.2 section 2.3.3
Listing 2.13 Creating a larger version of the panel
.panel {
font-size: 1rem; #1
padding: 1em;
border: 1px solid #999;
border-radius: 0.5em;
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em; #2
font-weight: bold;
text-transform: uppercase;
}
The panel establishes its font size in rems while its padding, border radius, and heading size use ems; changing the panel font size scales those parts together. section 2.3.3
Watch for compounding in nested elements. With ul { font-size: 0.8em; }, each nested list takes 80% of its parent’s already-reduced size, so text keeps shrinking. Set nested lists to font-size: 1em when they should retain the surrounding list’s size. section 2.2.1
Choose the reference size that matches the job:
- For small spaces around text or buttons, use ems when the space should grow with the font. Pixel values can be reasonable for larger gaps that need not respond that way. section 12.1.1
- For page-wide scaling, adjust the root font size at breakpoints; em-sized padding and other relative measurements can respond without separate changes to each component. section 2.3.2
- For a media-query breakpoint, an em uses the browser’s default font size, not a component’s size. A changed user default may change the breakpoint, though browser behavior is not fully consistent. section 7.2
Use pixel calculations when translating a design requirement, but do not treat the resulting pixel count as the permanent goal. An em value is most useful when its relationship to nearby text is what you want to preserve. section 2.3 section 12.1.1
