relative units

Question 1

Where does em draw its base-unit size from?

Answer 1

The font-size of the element being styled.

example:
If a div has a font-size of 16px, and a developer adds a width of 2em to the element. The actual width of the element will be 32px;

Gotcha:
A parent element’s font-size can only affect the value of em via inheritance i.e. if a font-size is not specified on the element.

Question 2

Where does rem draw its base-unit size from?

Answer 2

The font-size of the html element (the root element of the page)

example:
If a div has a font-size of 16px, and a developer adds a width of 2em to the element AND the HTML element has a font-size of 8px. The actual width of the element will be 16px because rem is not affected by the font-size of the div.

Notes:
The HTML element font-size can be set via the browser if it is not overridden.

Question 3

What are the only unit values that will cause em to not be affected by inheritance?

Answer 3

px, vh, and vw

Using ems when inheritance is at play can get tricky. For example, if the parent element has a 2em font-size value and its direct ancestor has a font size of 8px and the element you’re using wants a width of 2em, the element width would be:

width = 2(element font-size = inherited from parent)
width = 2(2em)
width = 2(2(8)) = 32px

When there are deeply nested levels of inheritance this can mean changing a top-level ancestor font-size could have unintended side-effects.