Some text will go in here.
If ems are used in the font-size property, their value is calculated as a multiple of the parent element's font size. This eventually leads back to the device's default font size, set by either the device or the user.
This can make it very difficult to accurately predict what the calculated value will be for multiply nested elements. While this is generally not a problem regarding fonts (after all, the goal is to make elements relative to each other, not to know exactly what their calculated size will be), it can make it difficult to know which value to set for box model properties if you're approximating values based on default document font size.
If, on the other hand, ems are used for any other property, their value is calculated as a multiple of that element's font size, NOT the parent.
Testing the font size of the spanFor the most part, percentages are pretty straightforward. Values are calculated based on the overall value of the parent element. For example, if you gave a block-level element a width of 100%, it would stretch as wide as possible, and only be restricted by the parent element.
For nested elements, you need to remember that a percentage is calculated relative to the parent, no matter how deep the element is. This can actually be very tricky in complicated layouts, as it is sometimes difficult to remember exactly which element the percentage is based on.
It's even more difficult when you mix percentages and other values. For example, if you set an element's width to 80% and set 20px worth of padding you need to remember that those values are cumulative. The total width of the element would be 80% of its parent, plus the 40px worth of horizontal padding.