Which unit I should use in CSS when designing a web page

I have designed and developed more than 10 sites, but I still have a doubt about the correct unit 开发者_StackOverflowI should use. Should it be px, em or %?

EDIT 1: FOR LAYOUTS (Especially for container boxes)

Different units depending on context. If there was one that was best for every situation, then there wouldn't be so many units.

As rules of thumb go:

If you are working on screen media:

• Use % for font sizes
• Use px for images
• Use px, %, or em for box sizes
• Use ratios for line height

If you are working in print media:

• It might be wise to avoid px (this is not a hard rule by any means) and everything else is fair game. It really depends how much control you want.

There's no real right or wrong, but as a rule of thumb:

• For anything you want a certain, fixed size, use PX
• For anything you want to scale with font-size, use EM
• For anything you want to scale to the available space in the window/container, use %

Each used to have specific advantages or disadvantages in different browsers when it came to users scaling the browser's base font-size/zooming, but more recent versions of the browsers by-and-large get around these issues by scaling everything, not just font-size.

If you're talking about font-size then px and pt are not ideal.

Ems and Percent units are scalable, therefore they are far more accessible - friendly for the visually-impaired. They also scale down well for mobile phone users.

Px and Pt units do not scale upward for visually-impaired users, or downward for mobile phones.

If you're talking about layout or containers then it depends on the type of design you want - fluid or static - and there isn't necessarily a "right" answer.

Without going into an example, it's difficult to advice. Do you have a site in mind we could look at?

Use the unit you need in the specific context.

Unit   Description
====================
%   percentage
in  inch
cm  centimeter
mm  millimeter
em  1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex  one ex is the x-height of a font (x-height is usually about half the font-size)
pt  point (1 pt is the same as 1/72 inch)
pc  pica (1 pc is the same as 12 points)
px  pixels (a dot on the computer screen)

source: http://www.w3schools.com/css/css_units.asp

For flexibility and accessibility I recommend using % for horizontal measures (relative to the user's screen), and em for vertical measures (relative to the user's font setting).

For fixed width layouts

For as much as pixel perfection I would suggest to use PX for width ,height, margin, and padding

for line-height use unit-less value like {line-height:1.2}

for typographic elemets use {font-size:62.5%) for body then use em for other elements

in HTML for <img> always use unit-less width and height .