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 %?

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

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.