CSS gives you more than a dozen ways to size an element, and picking the wrong one is one of the most common reasons layouts break on other screens. Units fall into two families — absolute, which always render at the same physical size, and relative, which scale based on something else on the page. Here's what each one actually does and when it earns a place in your stylesheet.
Absolute Units
Absolute units don't change based on any parent element, font size, or viewport. What you set is what you get, on every screen.
- px (pixel) — the default unit for most web work. A CSS pixel isn't always one physical screen dot on high-DPI displays, but for layout purposes it behaves as a fixed unit.
- pt (point) — 1pt = 1/72 of an inch. Inherited from desktop publishing; you'll mostly see it in print stylesheets.
- cm / mm (centimeters / millimeters) — physical metric units, useful almost exclusively for print layouts or when generating PDFs.
- in (inch) — 1in = 96px by CSS convention. Same use case as cm/mm: print, not screen.
- pc (pica) — 1pc = 12pt. Rarely used outside print-specific tooling.
Relative Units
Relative units scale based on another value — a parent's font size, the root font size, or the browser viewport. They're what makes responsive design possible in the first place.
- % (percent) — relative to the parent element's corresponding property. A
width: 50%child is half as wide as its parent. - em — relative to the font size of the current element's parent. Em values compound as elements nest, which is powerful but easy to lose track of a few levels deep.
- rem — relative to the root
<html>font size only, regardless of nesting depth. By default1rem = 16px. That predictability is why most teams default to rem for typography and spacing. - vw / vh — 1% of the viewport's width or height.
50vwis always half the browser window's width, no matter which element it's applied to. - vmin / vmax — 1% of whichever is smaller (vmin) or larger (vmax) between viewport width and height. Useful for elements that need to scale consistently in both portrait and landscape.
- ch — the width of the "0" character in the current font. Handy for capping a readable line length, e.g.
max-width: 65ch.
How the Absolute Units Relate to Each Other
Every absolute unit in CSS is pinned to the same anchor: the CSS reference pixel, defined as 1/96 of an inch. That means all of them convert to pixels with a fixed multiplier, and none of them depend on the actual screen you're looking at.
| Unit | Definition | Equals in px |
|---|---|---|
| 1in | 1 inch | 96px |
| 1cm | 1/2.54 inch | 37.795px |
| 1mm | 1/10 cm | 3.7795px |
| 1Q | 1/4 mm (quarter-millimetre) | 0.945px |
| 1pt | 1/72 inch | 1.3333px |
| 1pc | 12pt = 1/6 inch | 16px |
So 12pt is exactly 16px, 1pc is also 16px, and a 2.54cm box is exactly one CSS inch (96px). If you need these numbers for a specific value, the PX to CM and PT to PX converters handle the decimals for you.
How the Relative Units Resolve: Worked Examples
Relative units are only "relative" until the browser computes them. Every one of them ends up as a pixel value; the question is what it's measured against.
rem: always the root font size
With the default root size of 16px, 1.5rem is 24px and 0.875rem is 14px. If a user sets their browser's default font size to 20px, the same 1.5rem becomes 30px — which is exactly the point. Your spacing and type scale grow with the user's preference.
em: the parent font size, compounding
For font-size, em is relative to the parent's font size, and that compounds through nesting:
.menu { font-size: 1.2em; } /* 16px × 1.2 = 19.2px */
.menu .sub { font-size: 1.2em; } /* 19.2px × 1.2 = 23.04px */Two levels deep and the text is already 44% larger than intended. For properties other than font-size — padding, margin, width — em is relative to the element's own computed font size, which is why padding: 0.5em 1em on a button scales neatly with the button's text.
%: depends on the property
Percentages are the least uniform unit. width: 50% uses the parent's content width; height: 50% uses the parent's height (and only works if that height is defined); padding-top: 50% is surprisingly relative to the parent's width; and font-size: 150% behaves like 1.5em. Our PX to Percent converter uses the width rule: px ÷ parent × 100.
vw and vh: the viewport
On a 1440px-wide window, 10vw is 144px. On a 390px phone it's 39px. Read more about how browsers define that box in What Is the Viewport in CSS.
Newer Units Worth Knowing
- svh / lvh / dvh — small, large, and dynamic viewport height. On mobile, the browser toolbar changes the visible height as you scroll;
svhuses the smallest size,lvhthe largest, anddvhfollows the current one. Matchingsvw,lvw, anddvwexist for width. - cqw / cqh — container query units, 1% of a query container's width or height. They let a component scale with the box it sits in rather than the whole window.
- lh / rlh — the computed line-height of the element or the root, useful for vertical rhythm.
Quick Reference: Which Unit for Which Job
| Use case | Recommended unit |
|---|---|
| Font size, line height | rem |
| Padding/margin inside a component | em or rem |
| Borders, box-shadow offsets | px |
| Full-height hero sections | vh (or dvh on mobile) |
| Fluid container widths | % or vw |
| Readable text blocks | ch, as a max-width |
| Print stylesheets | cm, mm, or pt |
A Practical Rule of Thumb
If it should stay the same size no matter what — a 1px border, a 24px icon — use px. If it should scale with the user's font-size preference or with your design's type scale — headings, spacing, line-height — use rem. If it needs to track the browser window itself — a full-bleed hero, a sidebar that's always 30% of the screen — reach for vw/vh or percentages.
Need to move between any of these quickly? Our PX to REM, PX to VH, and PX to CM converters do the math instantly. CSS colors are worth getting right too — see our Color Converter.
Accessibility: Why the Unit Choice Matters
Browsers offer two ways to make text bigger. Page zoom scales everything, including px values, so it works regardless of unit. The default font-size setting, however, only changes the root font size — and only rem, em, and percentage-based font sizes follow it. A heading locked at font-size: 32px ignores that setting completely. That's the main practical argument for rem on text: it respects a choice the user has already made.
Viewport units have a similar trap. font-size: 3vw on its own doesn't grow with either the font-size setting or, in some browsers, with zoom on a fixed window. If you want fluid type, combine it with rem inside clamp():
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); }The rem parts keep a floor and ceiling tied to the user's preference, while the vw part supplies the smooth scaling between them.
Common Mistakes
- Setting
html { font-size: 62.5%; }and forgetting about it. It makes 1rem = 10px for easy maths, but every third-party component that assumes 1rem = 16px now renders smaller. - Using em for font sizes in deeply nested components. The compounding shown above is rarely what you wanted; rem avoids it.
- Expecting
height: 100%to work without a defined parent height. If the parent's height is auto, the percentage has nothing to resolve against. - Using
100vwfor full-width sections. On desktop, vw includes the vertical scrollbar, sowidth: 100vwcan cause a horizontal scrollbar.width: 100%usually does what you meant. - Assuming a CSS cm is a real centimetre on screen. It's 37.795 reference pixels; only in print does it reliably match a ruler. See CSS Units for Print vs. Web.
Frequently Asked Questions
Is px an absolute or a relative unit?
The CSS specification lists px as an absolute unit, defined as 1/96 of an inch. In practice the browser maps it to physical screen pixels using the device pixel ratio, so one CSS pixel may be drawn with two or three hardware pixels on a high-density display. It's still treated as fixed for layout purposes.
Should I use rem or em for padding and margins?
Use rem when spacing should follow a global scale, such as gaps between page sections. Use em when spacing should follow the element's own text size, such as padding inside a button or badge, so a larger button automatically gets proportionally larger padding.
What is the default value of 1rem?
1rem equals the root element's font size, which is 16px in all major browsers unless the user or your stylesheet changes it.
Can I mix units in one declaration?
Yes. calc(), min(), max(), and clamp() all accept mixed units, for example width: calc(100% - 2rem) or padding: max(1rem, 3vw). The browser resolves each part to pixels and then does the arithmetic.
Try it yourself: pick a value from your current stylesheet and run it through the CSS unit converters to see its equivalent in rem, em, vw, pt, or cm — it's the quickest way to get a feel for how each unit behaves.