CSS Units Reference
CSS units reference (px, em, rem, vw, vh, %, etc.)
CSS Units Reference is a free online tool from BrowserUtils that css units reference (px, em, rem, vw, vh, %, etc.). It runs entirely in your browser — your data never leaves your device. No account required.
px
Pixels - 1/96th of an inch on screen
font-size: 16px;
pt
Points - 1/72nd of an inch (print)
font-size: 12pt;
pc
Picas - 1pc = 12pt
font-size: 1pc;
cm
Centimeters
width: 10cm;
mm
Millimeters
width: 100mm;
in
Inches - 1in = 96px = 2.54cm
width: 1in;
Q
Quarter-millimeters - 1Q = 0.25mm
font-size: 40Q;
em
Relative to parent element font size (compounds when nested)
padding: 1.5em;
rem
Relative to root element font size (consistent, does not compound)
font-size: 1.25rem;
ch
Width of the "0" character in current font
max-width: 60ch;
ex
Height of the "x" character in current font
line-height: 2ex;
cap
Height of capital letters in current font
height: 1cap;
ic
Width of the CJK water ideograph in current font
width: 10ic;
lh
Line height of the element
margin-top: 1lh;
rlh
Line height of the root element
margin-top: 1rlh;
vw
1% of viewport width
width: 50vw;
vh
1% of viewport height
height: 100vh;
vmin
1% of the smaller viewport dimension
font-size: 5vmin;
vmax
1% of the larger viewport dimension
font-size: 5vmax;
svw
1% of small viewport width
width: 100svw;
svh
1% of small viewport height
height: 100svh;
lvw
1% of large viewport width
width: 100lvw;
lvh
1% of large viewport height
height: 100lvh;
dvw
1% of dynamic viewport width
width: 100dvw;
dvh
1% of dynamic viewport height (adjusts for mobile UI)
height: 100dvh;
cqw
1% of query container width
font-size: 5cqw;
cqh
1% of query container height
height: 50cqh;
cqi
1% of query container inline size
width: 50cqi;
cqb
1% of query container block size
height: 50cqb;
cqmin
1% of smaller query container dimension
font-size: 3cqmin;
cqmax
1% of larger query container dimension
font-size: 3cqmax;
%
Percentage of parent element property value
width: 50%;
fr
Fractional unit for CSS Grid tracks
grid-template-columns: 1fr 2fr 1fr;
deg
Degrees (angles: 0-360)
transform: rotate(45deg);
rad
Radians (angles)
transform: rotate(1.57rad);
turn
Turns (1turn = 360deg)
transform: rotate(0.5turn);
grad
Gradians (400grad = 360deg)
transform: rotate(100grad);
s
Seconds (time)
transition: all 0.3s;
ms
Milliseconds (time)
animation-duration: 300ms;
dpi
Dots per inch (resolution)
@media (min-resolution: 2dpi)
dpcm
Dots per centimeter (resolution)
@media (min-resolution: 1dpcm)
dppx
Dots per pixel (resolution, 1dppx = 96dpi)
@media (min-resolution: 2dppx)
How to use CSS Units Reference
- 1 Paste or type your input into the editor above.
- 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
- 3 Copy the result with one click or continue editing your input.
About CSS Units Reference
Free online CSS units reference. Browse all CSS length, percentage, and viewport units with descriptions, use cases, and examples. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
CSS Units Reference specs
- Runtime
- 100% client-side (browser)
- Cost
- Free — no account, no rate limits, no usage caps
- Browser support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Part of
- 299 developer tools on BrowserUtils (100% client-side)
Questions
What is the difference between em and rem?
em is relative to the font size of its parent element, so it compounds when nested. rem (root em) is always relative to the root element font size (usually 16px), making it more predictable for consistent sizing.
When should I use px vs rem?
Use rem for font sizes and spacing to respect user font size preferences and improve accessibility. Use px for borders, shadows, and fine details where you need exact pixel values. Use viewport units (vw, vh) for responsive layouts.
What are viewport units in CSS?
Viewport units are relative to the browser window size. 1vw equals 1% of the viewport width, 1vh equals 1% of the viewport height. There are also vmin and vmax, which reference the smaller or larger viewport dimension respectively.
What is the ch unit in CSS?
The ch unit equals the advance width of the "0" (zero) character in the current font. It is useful for setting widths of text inputs or containers to a specific character count, such as limiting a paragraph to 60ch for readability.
What CSS units work best for responsive design?
Combine rem for typography and spacing, percentages for flexible widths, and viewport units (vw, vh) for full-screen layouts. Avoid fixed px values for anything that should scale with screen size or user preferences.
Comments
Related tools
More Developer Reference
ASCII TableHTML Entities ReferenceRegex CheatsheetCSS Selectors ReferenceHTML Color NamesKeyboard KeycodesUnicode TableHTML Tags Reference
View all Developer Reference tools
Comments