What is the context of em?

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)?

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.

1. http://www.impressivewebs.com/understanding-em-units-css/
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. 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/

The em unit denotes the font size of the element, except when used in the value of the font-size property, where it denotes the font size of the parent element. In this sense, in the case presented, the context is the parent element.

In the case presented, the font size of the word “toad” is thus equal to the font size of the parent of the h1. No specific value for it can be inferred for it from the data given.

When font sizes is computed, the font size of the parent of h1 has been computed when this construct will be dealt with; let’s call it s. First the font size of h1 is computed, multiplying s (the font size of the parent) by 2. Then the font size of the span element is computed, multiplying its parent’s font size by 0.5, yielding s. Theoretically, rounding errors could cause a minimal deviation in such processes, but multiplication by 2 and 0.5 can be assumed to be exact in computers.

It would be .5 times the 2em of the h1 element in context.

To force it to be relative to the 16px, you would have to set the parent of h1 to font-size 16px first.

.wrapper{font-size:16px;} h1 { font-size: 2em; } .smaller { font-size: 0.5em; }

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

SO in this case,

• wrapper has a font-size of 16px
• h1 has a font-size of 2em of 16px
• span.smaller has a font-size of 1em (of .wrapper inherited from h1 (.5em of 2em)) of 16px

Note that em is a relative measure from the context which is nominally based on the M characters height in the current font. For all intents then h1 has a 32px size and span.smaller has a 16px size.

It depends on the parent element pixel size. If your parent element pixel size is 16px

.5em will equal to half of your base pixel so it will be 8px and 2em for h1 will equal to 32px.

It all depends on how you have set up the parent element pixel size in your CSS.

http://pxtoem.com/