Facing a property like width or font-size, picking a unit seems trivial, until a 20px behaves differently from a 1.25rem that was supposed to represent the same size. Each CSS unit computes its final value from a different reference, and knowing that reference avoids most of the surprises.
This entry gives the general overview; the most used units, rem and em and Viewport units, each have their own page covering their respective traps in detail.
Definition
CSS units split into two families. Absolute units always represent the same size, whatever the context. Relative units, on the other hand, are computed against something else: a parent element, the root of the document, or the browser window.
.block {
width: 300px; /* absolute: always 300 CSS pixels */
padding: 2rem; /* relative to the root font size */
max-width: 90%; /* relative to the parent's width */
}Absolute units
| Unit | Actual use on screen |
|---|---|
px | The only one really used for on-screen display |
cm, mm, in, pt, pc | Built for print, almost never used in web CSS |
20px stay a comparable size on an ordinary screen and on a very dense one.Relative units
| Unit | Relative to |
|---|---|
% | The size of the parent element |
em | The font size of the element itself, or of its parent |
rem | The font size of the root element, always the same |
vh, vw, vmin, vmax | The height or width of the visible window |
ch, ex | The width of a character or the height of a lowercase x, in the current font |
The ch unit deserves a special mention: it matches the width of the digit 0 in the current font, which makes it a handy reference for limiting how long a line of text runs. Writing max-width: 60ch; guarantees a line of roughly sixty characters regardless of the font size the reader has chosen, a width widely recognised as comfortable to read. Outside that specific case, ch and ex remain rarely used in an everyday project.
How to choose in practice
rem suits typography and regular spacing best, because it stays predictable wherever it is used on the page. Percentages suit widths that need to follow their container. Viewport units suit elements meant to fill all or part of the screen, like a homepage banner. Pixels keep their place for anything meant to stay a small, fixed size, a one-pixel border or a drop shadow. Our HTML and CSS course revisits these unit choices on every layout it builds, so the right habit sticks in practice rather than staying a rule learned by heart.
Combining several units
Nothing stops these units from being mixed within the same stylesheet, or even within the same value thanks to calc(), which accepts operands of different units in a single calculation, like calc(100% - 2rem).
Frequently asked questions
No, only on standard-density screens. On a high-density screen, the browser maps several physical pixels to a single CSS pixel, so a site built for an ordinary screen keeps comparable proportions on a denser one.
No, they remain perfectly suited to fixed details like a thin border or a shadow. They are mainly discouraged for text size and the spacing that structures a page, where a relative unit like rem stays more predictable at scale.
rem first, because it stays stable regardless of the parent element and respects the reader's browser text size setting. The rem and em entry details the cases where em is still the better choice.