CSS Units Reference
CSS units reference for px, em, rem, %, vw, vh, vmin, vmax and ch, grouped by category with clear guidance on when to use each one. Covers absolute and relative units, free in your browser.
| Unit | Name | Type | Description | Example |
|---|---|---|---|---|
| px | Pixels | absolute | One pixel on screen. The most basic unit. | font-size: 16px; |
| em | Em | relative | Multiple of the parent element font-size. | padding: 1.5em; |
| rem | Root Em | relative | Multiple of the root (html) element font-size. | margin: 2rem; |
| % | Percent | relative | Percentage relative to the corresponding parent property. | width: 50%; |
| vw | Viewport Width | viewport | 1% of the viewport width. | width: 100vw; |
| vh | Viewport Height | viewport | 1% of the viewport height. | height: 100vh; |
| vmin | Viewport Min | viewport | 1% of the smaller of vw and vh. | font-size: 5vmin; |
| vmax | Viewport Max | viewport | 1% of the larger of vw and vh. | width: 50vmax; |
| dvh | Dynamic VH | viewport | Dynamic viewport height (accounts for mobile address bar). | height: 100dvh; |
| svh | Small VH | viewport | Smallest viewport height. | min-height: 100svh; |
| lvh | Large VH | viewport | Largest viewport height. | max-height: 100lvh; |
| ch | Character | relative | Based on the width of the "0" character. | max-width: 60ch; |
| ex | X-Height | relative | Based on the height of the "x" character. | line-height: 2ex; |
| cm | Centimeters | absolute | Centimeters. For print. | width: 10cm; |
| mm | Millimeters | absolute | Millimeters. For print. | margin: 5mm; |
| in | Inches | absolute | Inches (1in = 96px). | width: 2in; |
| pt | Points | absolute | Points (1pt = 1/72in). | font-size: 12pt; |
| cqi | Container Inline | container | 1% of the container inline size. | font-size: 5cqi; |
| cqb | Container Block | container | 1% of the container block size. | padding: 2cqb; |
19개 표시 중
Embed
Last updated: 2026 · Free online tool
What is CSS Units Reference?
CSS units reference for px, em, rem, %, vw, vh, vmin, vmax and ch, grouped by category with clear guidance on when to use each one. Covers absolute and relative units, free in your browser.
How to Use
- 1Search— Search for the item you need by keyword.
- 2Category— Filter by category buttons.
- 3Copy— Copy the item you need.
Related Tools
PX to REM ConverterPX to REM converter that translates CSS pixel and rem units in both directions using a customizable root font size, decimals included. Comes with a copyable reference table and CSS snippet output, free in your browser.
Browser Compatibility CheckerBrowser compatibility checker for any CSS, JavaScript, HTML or Web API feature, showing which Chrome, Firefox, Safari and Edge versions support it. Free and instant, so you can pick browser targets with confidence.
CSS Gradient GeneratorVisual CSS gradient generator for linear, radial and conic gradients: add color stops, tweak the angle and copy ready-to-use CSS. Perfect for backgrounds, buttons and hero sections, free in your browser.
CSS Box Shadow GeneratorCSS box-shadow generator with offset, blur, spread, color and inset controls and a live preview of the shadow. Copy ready-to-use box-shadow CSS for any element, free in your browser.
Frequently Asked Questions
A free online tool to browse CSS units like px, em, rem, vh, vw by category.
Yes, you can search in real-time by keyword.
No. It uses static data and works offline.
Yes, click on any item to copy it.
Yes, the responsive design works on mobile devices.