What are the differences between these web units? What are the pros and cons, and the appropriate time to use each of them?
px, ex, em, pt, %
Asked
Active
Viewed 211 times
-5
-
2Several more good ones: http://stackoverflow.com/search?q=em+px+pt – Pekka Feb 17 '11 at 23:44
-
5I'm beginning to get the feeling we're here to do custom web searches, not answer questions... – mellamokb Feb 17 '11 at 23:46
-
2@mellamokb: I got really lazy, so I wrote an answer instead. Wait a minute... – BoltClock Feb 17 '11 at 23:49
1 Answers
3
px stands for pixels. Exactly what it says on the tin: each dot on your screen is a pixel.
ex refers to the x-height of the given font, i.e. the height of the lowercase letter x for that font.
em refers to the maximum height required by a font. It is a commonly-used relative font size because it is calculated based on the computed font size of an element (or its parent if inherited).
pt stands for typographic point, which is 1/72 of an inch.
% is the percentage relative to a given property otherwise inherited from an element's parent.
Note that em and % work the same way. Ems are something like the decimal representation of percentages, i.e. 1 = 100%, 0.01 = 1%.
You can find more units at the CSS3 spec.
BoltClock
- 700,868
- 160
- 1,392
- 1,356