which unit i should use in CSS, while designing web page

Question

I deisgned more than 10 sites, still i had a doubt in mind of 'Whats the correct unit I should use'. Whether it is px, or em or %. Plz guide me to right direction

EDIT 1: FOR LAYOUTS (Especially for container boxes)

Answer 1

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.

Answer 2

See:

Difference between em, % and px

Answer 3

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

Answer 4

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?

Answer 5

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.

Answer 6

For layout and container boxes:

• if your layout is fixed width, specify widths in px
• if your layout is fluid width, specify widths in %

Note 1: if your layout is fluid width you can mix px widths with % widths. E.g. when you need to have a fixed 200px wide inner column inside an 80% wide master layout.

Note 2: em are more suitable for specifying heights: font height, line height, block-level element's height etc. Heights specified in em will render differently depending on browser, user preferences, fonts used etc.

Answer 7

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

Answer 8

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 .