It's the height of the standard latin uppercase letters, typically the same as the height of M. (In pretty much all other typecasting situations it's the width, and not the height, but not in CSS.) w3.org/WAI/GL/css2em.htm
In CSS, an EM means the FONT SIZE of the parent element. Let's say we created a new BLANK web page. We will most likely be using Windows XP and be using either IE6 or FF (or Opera). I'm guestimating around 90% of the time the default font size set by the browser will be 16 pixels. If your HTML looked like this: *index.html* hello world No doctype, no paragraph element, no header element, etc if you open either Firebug or Web Developer Element Information ( CTRL SHIFT + F shortcut with plugin installed), you would see that the font family is SERIF and the font size is 16 pixels. Now, let's see what 1 em really is. Let's make hello world a paragraph, like so *index.html* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>What is an em, anyway?</title> <style type="text/css" media="screen"> p { font-size:1em; } </style> </head> <body> <p>hello world.</p> </body> </html> Refresh the page. What changed? Nothing. Why? Because we set the font size of any paragraph in the document to be 1 em, or the same as the parent elements font size (which is 16 pixels by default in MOST cases). Now, let's try changing the 1em to 1.1em and refresh the page. Checkout the font size using firebug/web developer and we get 17.6. How is this so? Well, the parent elements font size is 16 pixels, and in our previous rule we had 1em which equaled to be 16 pixels. Time for a little math.. 1(em) times the parent elements font size (16 pixels) would be 16. 1.1(em) times the parent elements font size (16 pixels) is 17.6 pixels. 2(em) times the parent elements font size is 32 pixels. Now, let's try to understand this using Richard Rutter's 62.5% technique. Since in most cases, the default font size is 16 pixels, calculating is a little difficult (when you don't reset the font size in the stylesheet/document) because with defaults, 1.1em gives you 17.6 pixels, and 1.2em gives you 19.2 pixels. If you wanted text to be 11 pixels, you would have to set the font size on the paragraph to .6875em (11/16). Now unless you're a very good mathematician (sp?) it would be a b!tch windowskeyRcalc'ing the font size each time.. therefore one good technique would be to make it so that your HTML and/or BODY elements (which are parents to your divs) are 10 pixels, and you can easily calculate the font size. To get 10 pixels, we divide 10 by 16, which gives us .625, which you can use as .625em or 62.5%. body { font-size:62.5%; } would give us 62.5 percent of 16 pixels, which is 10 pixels. Then, if we wanted 11 pixels for our paragraphs we would do p { font-size:1.1em; } I hope that simplified your understanding of ems.. I've probably left out a buncha crap about how sometimes browsers aren't consistent with just strictly em sizes, rounding errors, and how 16 pixels is not always the default, but if you're interested you can just google around font size articles...
It's always best to use 100% as your default font size before letting EM handle the measurements. Also, when using EM for your text size and the containers dimensions (mainly width) it's best to use the Lucida Console font for the testing of your dimensions - not every user has the same fonts, and some fonts will actually break the layout because they are really "larger" than their containers. The use of Lucida Console to fix this is the best method of solving that problem. Just make sure you remove the font declaration ("Lucida Console") from your stylesheet when you are done, but leave the font size declarations alone to ensure that other fonts (like the ones you specify) have enough breathing room. Also check the font-metrics (think .dpi settings) before you finish a coded template design and move on to populating the Web pages or coding the template for a CMS to ensure that it works with larger and smaller settings as well.
for whatever reason maybe the influence of some article on css-discuss/incutio i set 100.01% for each element and then go with either 1em or 62.5%, have you ever looked into this ".01%" ?
That would be a bug fix for some versions of Safari (the 100.01% declaration). Avoid 62.5% since it can make fonts look like soggy garbage sitting on top of a landfill after a long soaking rain if the person visiting your site has really high .dpi settings and/or changes the default font size in their browser.
As already stated it is a percentage. So in your body tag if you specify 12px as your font size 1.1 em would be 110% of 12px or 13.2px.