When length of an element is specified using
it is calculated based on the font size
of the element. If this element has no
the length is calculated based on the
font size of its nearest parent HTML element.
As a default,
1em = 16px.
The width and height
div depends on its
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 is no longer
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