What is an em?

Can someone please explain what an "em" is, and how it relates to other sizing things - like pixels.

 

"em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device "

Not sure what it stands for...

 

em's are a contrived unit for CSS, they pretty much correlate to percentages:

1em = 100%
1.5em = 150%
And so on..

 

Using ems, enhances your pages accessibility.

 

It makes no difference if you are already using a scaleable format like %, however if you are using px or pt or an unscalable format, it would make a massive difference to accessibility users.

 

Here is a graphical representation comparing the following units of measurement:
10em, 10ex, 10px, 10in, 10cm, 10mm, 10pt, 10pc

http://zvon.org/xxl/css1Reference/Output/index.html

 

Another point about em is that it defines it's size from the parent element. So let's say you have your page and you set the body tag to have a font size of .9em, and then you set a p tag to have a font size of .5 em, the p tag will take 50% of the .9em and not 50% 1em.

 

Not quite, if I understand you correctly. em is defined as the font-size of the relevant font. font-size is described in CSS2 as

In other words, if you change font-size for the current element, em will refer to the current element's font-size, not the parent's.

J.D.

 

That is correct. There is one exception to that rule though. When an em is used in a "font-size", it becomes relative to the parent element. Here is the W3C spec:

Here is an example of what I am talking about...

http://limepudding.com/ems.htm