CSS units · Absolute length
px
The CSS pixel is a reference unit: 96 CSS pixels equal one inch.
Key facts
| Type | Absolute length |
|---|---|
| Reference | 96px = 1in |
| Device relation | Scaled by device pixel ratio |
| User font size | Not affected |
| Best for | Borders, hairlines, precise assets |
| Standard | CSS Values and Units Level 4 |
A logical pixel, not a physical one
The CSS pixel is defined so that 96 of them span one inch in the reference viewing setup. On a high-density screen, one CSS pixel covers multiple device pixels; the browser scales the layout so text and controls keep a consistent apparent size. Device pixel ratio describes that mapping, not the CSS length itself.
Zoom changes how many device pixels a CSS pixel occupies, but the CSS value stays the same. That is why a layout can look identical at 100% and 200% while occupying a different physical area.
When to use px
Borders, shadows and icon sizes are often specified in pixels because they should not scale with the parent's font. A 1px border remains crisp across font changes. Very small values can disappear on low-DPI screens, where a hairline may round to zero.
Avoid setting the root font size in pixels if you want the user's preference to apply. Use rem for text and spacing that should respect accessibility settings.
Frequently asked questions
Is 1px always one screen pixel?
No. On a high-DPI display it may cover several device pixels; the browser maps it to keep the layout consistent.
Should I use px for font sizes?
Usually not. rem follows the user's root font setting; px overrides it.