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

Question

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

Answer 1

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 .

Answer 2

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 3

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 4

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 5

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 6

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