What is the context of em?
css, font-size, html
Solution
It's equal to the computed value of the ‘font-size’ property of the element on which it is used. Inheritance runs down the document tree.
To answer your question, it would be 0.5 times the 2em, which in turn would be 2 times whatever the h1's parent's computed font-size is. phew.
It's also important to note that if you use `em` on other CSS properties, for example, `width` or `height`, the result will be calculated from the computed `font-size` of whatever element you apply the `width` or `height` to, etc...
The following article describes the use and context of the `em` unit rather well in my opinion, along with some other reading material and resources... `rem` units may interest you somewhat also.
- http://www.impressivewebs.com/understanding-em-units-css/
- http://snook.ca/archives/html_and_css/font-size-with-rem
- http://caniuse.com/rem
You may also like to check out this fiddle to see how it acts a little clearer:
http://jsfiddle.net/HpJjt/3/
Problem
In this example: THE CSS ``` h1 { font-size: 2em; } .smaller { font-size: 0.5em; } ``` THE HTML ``` <h1>Hi, I am a <span class="smaller">toad</span></h1> ``` Will the word "toad" be 0.5 times 16px (the browser's standard font-size) or will it be 0.5 times 2em (the font-size of the h1)?