Choose a CSS unit by asking what should control the value: use px for CSS-pixel precision, rem for a root-based scale, em for sizing tied to local typography, % when a property’s defined reference should determine the value, and viewport units when the viewport should. The important distinction is that % does not always mean “of the parent,” and a CSS px is not necessarily one physical screen pixel.
CSS units at a glance
| Unit | What it is relative to | Useful when | Watch for |
|---|---|---|---|
px |
A CSS pixel, an absolute CSS length unit | You want a value expressed in CSS-pixel terms, such as a fine border | It does not guarantee one physical device pixel; display density, zoom, and rasterization affect how it appears. |
em |
The element’s font size; for a font-size declaration, the parent’s font size |
Component spacing or sizing should scale with its typography | Nested font-size declarations can compound as local font contexts change. |
rem |
The root element’s font size | You want a consistent scale across the document that follows the root text size | Changing the root font size changes every value expressed in rem. |
% |
The reference defined for the particular property | A value should be proportional to that property’s relevant reference dimension | The reference varies by property; check the property’s definition rather than assuming it is the parent. |
vw, vh |
One percent of viewport width or height | A size should respond to viewport dimensions | On mobile, browser interface changes can make a height based on the viewport unsuitable for a full-height layout. |
sv*, lv*, dv* |
One percent of the small, large, or dynamic viewport dimension | You need to choose how viewport sizing responds to browser UI changes | Small viewport units may leave unused space when browser UI retracts; dynamic units track the changing viewport. |
What does a CSS pixel mean?
px is an absolute CSS length unit, but “absolute” is a formal unit classification—not a promise that one CSS pixel equals one hardware pixel. A high-density display can map a CSS pixel to multiple device pixels, and fractional CSS lengths can be rasterized to device-pixel increments. As a result, a one-pixel border is specified in CSS pixels, while its physical appearance depends on the display and rendering conditions.
As an Amazon Associate I earn from qualifying purchases.
Use px when you mean to specify a CSS-pixel-sized value, for example a delicate border. Avoid treating it as a fixed physical measurement across devices.
How do em and rem differ?
em: follow local typography
For properties other than font-size, em is based on the element’s computed font size. For a font-size declaration, it is based on the parent’s font size. This makes em useful when a component’s padding or other sizing should grow or shrink with its text. Because nested font sizes establish changing local contexts, nested em-based font sizes can compound.
#1 Best Overall
rem: follow the root
rem is based on the root element’s font size. It gives values across separate components a shared reference, so changing the root size changes those values together. Choose it when you want a document-wide scale rather than a value that depends on each component’s local typography.
.card {
font-size: 1.125rem;
padding: 1em;
}
.card__title {
font-size: 1.25em;
}In this example, the card’s font size follows the root size; its padding follows the card’s computed font size; and the title’s font size, because it is a font-size declaration, follows the parent card’s font size.
Rank #2
What does a percentage depend on?
A percentage is contextual: the property using it determines the reference. It is not a universal synonym for “relative to the parent,” nor is it another way to express viewport sizing. When choosing a percentage, identify the specific property and consult its definition to find the percentage basis. Use % when that property-defined reference is the dependency you want.
When should you use viewport units?
Classic vw and vh
vw represents one percent of viewport width, and vh one percent of viewport height. They suit values intended to respond to viewport dimensions. MDN’s current account describes the default vh in relation to the large viewport height; a layout that assumes it always represents the currently unobstructed mobile screen can therefore behave unexpectedly as browser controls expand or retract.
Small, large, and dynamic variants
The sv*, lv*, and dv* families provide explicit small, large, and dynamic viewport references, including height variants such as svh, lvh, and dvh. Choose the reference according to the intended behavior: a small viewport reference can keep content within the smaller available area, a large reference accounts for the larger viewport, and a dynamic reference tracks the changing viewport. The trade-off is visible in the layout: a small-unit height may leave space unused after browser UI retracts, while a dynamic-unit height changes as the viewport changes. For full-screen mobile designs, check the result in the target browsers.
A practical way to choose
- Should the value follow the document’s root text scale? Use
rem. - Should it scale with the local element’s typography? Use
em, taking care when nested font sizes alter the local context. - Should the property’s own reference determine the proportion? Use
%, after confirming that property’s percentage basis. - Should the value respond to viewport dimensions? Use
vwor a suitable small, large, or dynamic viewport unit; for viewport height on mobile, choose intentionally and test the layout. - Do you want a value expressed directly in CSS pixels? Use
px, remembering that CSS pixels are not guaranteed to equal physical pixels.
This is a choice about dependency, not a rule that one unit is always best. A design can use several units where different values need different reference frames.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you want to inspect a rendered page after changing its CSS units, you can capture it with ScreenshotNeo, a website screenshot API and MCP server. For example, this cURL request captures a page as WebP:
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. It accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides screenshot and page-information tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
