A CSS computed value is the browser-resolved result of a declared value after inheritance and relative-unit conversion. A declaration such as padding: 1em becomes an absolute value using the element’s font size. section 2.2
The reference used depends on the property. An em used for padding or border-radius is based on the current element’s font size, while an em used for font-size is based on the inherited font size. The browser calculates font-size first, then uses it for other em-based properties. section 2.2 section 2.2.1
One element, two computed values
With body { font-size: 16px; }, a slogan declaring font-size: 1.2em computes to 19.2px. If the same slogan declares padding: 1.2em, padding uses its computed 19.2px font size and becomes 23.04px. Identical declared numbers therefore need not produce identical computed values. section 2.2.1
Computed values also affect inheritance. A length-valued line-height is calculated once and that result passes to inheriting children, which can cause overlap when their font sizes differ. A unitless line-height preserves the multiplier and recalculates it for each descendant. section 2.5
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;
}
Inspect the paired em declarations to see why font-size must be resolved before padding. section 2.2.1
