Sizing
5.4
Lesson

Relative Unit 'em'

When length of an element is specified using em, it is calculated based on the font size of the element. If this element has no font-size specified, the length is calculated based on the font size of its nearest parent HTML element.

As a default, 1em = 16px.

The width and height of the div depends on its font-size.

Width is calculated as:

10em = 10*font-size = 10*1em = 10*16px = 160px

In the above example, html element is the parent element. If you change the parent element’s font-size, the div’s font-size is no longer 16px:

Font size of div is calculated as:

1em = 1*parent-font-size = 1*10px = 10px

And hence the width of this div is:

10em = 10*font-size = 10*10px = 100px