Pixels vs. Points in HTML/CSS

Question

When creating an HTML page, should I specify things like margins with pixels or with points in CSS?

Is one of them considered to be better practice than

Answer 1

I use pixels for nearly everything.

For me, it "feels" like I have more precise control.

For the few things that I need to dynamically resize with the window, I use percent.

EDIT:

What is "em"?

Answer 2

I think it depends on what you're trying to do.

I find the key question is does the distance need to resize with the window? Some units are relative, some (like pixels and points) are not - a brief description is here.

I haven't seen points used much, px seems more common when an absolute measurement is needed.

Answer 3

Use px or em

• CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

Generally, 1em = 12pt = 16px = 100%.

[Conclusion]

The winner: percent (%).

• JohnB note: this is for TEXT. Obviously you asked about "things like margins." (I assume you mean padding also.) For that, I would recommend px or em. Personally, I switch, depending on the particular situation.

MORE ARTICLES

• px – em – % – pt – keyword

Point values are only for print CSS!

(Comment further down)

Points are for print? Nope.

Points are not for print exclusively. Theoretically, points are for defining an absolute measure. Pixels are not absolute, since depending on your screen and chosen definition (not resolution), the resolution (pixels per inch) can go from a lot (150dpi) or very little (75dpi). Which means your pixels can be a size, or maybe half that size. Which means that text you design to be perfectly legible on your screen may look too big on your client’s screen (“please make the text smaller, ok?”) or too small to be readable on your neighbor’s screen (“hey, the website you told me about the other day? the one you said you had worked on… well i couldn’t read the text very well, it’s so small”).

Points are a solution to this issue. But browsers and operating systems need to manage those. Basically, it means:

browsers have to calculate the display size in pixels using the given value (say, 10pt) and the screen’s real resolution; operating systems have to communicate the real current resolution, and not a default value.

Also:

• CSS: Comparing Font Size, Percentage, Em, Point, and Pixel