Difference between em, % and px

an EM is the square of the font-size.

:?

As per w3c, css2.1 spec an em is

Thanks. I thought it had something to do with the font-size. But which font-size is this corresponding to?

Width and height of containers, is that normal to set in %? If for instance the content of a page should have width and height 80% of the viewport, is it normal to set this in % or in em?

You can't get much clearer than what Chris posted.

w3c wrote:
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

For width and height of a container or content, pixel units or percentages would be best to stay relevant to the resolution size. I have seen them defined with em, but I don't think it is always best. I tend to use em more for padding and margins.

- r

For which to use where and when. To a large extent that is a choice dependent on developer style. I am sure different people here could give their very good reasons for preferring one style over another and (mostly) no way is wrong.

These are my reasons.

Try to keep the units as relevant to the element as possible. By that I mean if the element is particularly related to an image, size it in pixels. If the element is particularly related to text, size it in ems.

Be aware of the effect of user changes on your elements and how that effects unit choice. The user may change the font-size. That can have a big effect on elements that contain text which are sized in pixels - e.g. that neat tabbed horizontal menu sized at 60px x 20px. Similarly changes in font-size and browser width can have a big effect on the width of columns set in ems or %.

Be careful when mixing dimension units, e.g. 2 columns 45% wide, with 0.5em padding, 1px border and 10px margins. The 10% left after the columns needs to fit the ~70px of padding, margins and borders. Which means the page will fail when the container width falls below 700px, higher if the user increases the font-size.

Personally, I try to use ems for widths, padding & margins as much as possible. If the font-size changes the spacing needs to change too to keep the same proportional look.

Thanks for god answers!!
For me it seems like setting a margin in em works different in IE then in FF. It seems like em is bigger in IE. Is the default font-size different?

FF and IE round calculations to whole pixels slightly differently. However, (iirc) both FF/Win and IE6/Win should default to a font-size of 16px. User browser settings can change this.