CSS Units Cheatsheet
Complete reference for all CSS length, angle, and time units.
Click any value to copy it to your clipboard.
Visual Comparison
em vs rem - Nested Elements
See how em compounds with nesting while rem stays consistent.
Using em (compounds)
Parent: 16px (font-size: 1em)
Child: 24px (font-size: 1.5em)
Grandchild: 36px (font-size: 1.5em)
Using rem (consistent)
Parent: 16px (font-size: 1rem)
Child: 24px (font-size: 1.5rem)
Grandchild: 24px (font-size: 1.5rem)
Viewport Units Explained
vw / vh
Standard viewport
svw / svh
Small viewport (UI visible)
lvw / lvh
Large viewport (UI hidden)
px to rem Converter
Formula: rem = px / base-font-size (default base is 16px)
Absolute Units
Fixed size, not relative to anything else. Use for print or fixed-size elements.
| Unit | Name | Description | Example |
|---|---|---|---|
| px | Pixels | 1px = 1/96th of 1in | |
| cm | Centimeters | 1cm = 37.8px | |
| mm | Millimeters | 1mm = 3.78px | |
| in | Inches | 1in = 96px | |
| pt | Points | 1pt = 1/72 of 1in | |
| pc | Picas | 1pc = 12pt = 16px |
Relative Units (Font-based)
Relative to font metrics. Great for responsive typography and spacing.
| Unit | Name | Description | Example |
|---|---|---|---|
| em | Em | Relative to parent font-size | |
| rem | Root Em | Relative to root font-size (html) | |
| ex | Ex | x-height of current font | |
| ch | Character | Width of '0' character | |
| cap | Cap Height | Height of capital letters | |
| ic | Ideographic | Ideographic character width (CJK) | |
| lh | Line Height | Line height of the element | |
| rlh | Root Line Height | Line height of root element |
Viewport Units
Relative to the browser viewport. Perfect for full-screen layouts.
| Unit | Name | Description | Example |
|---|---|---|---|
| vw | Viewport Width | 1% of viewport width | |
| vh | Viewport Height | 1% of viewport height | |
| vmin | Viewport Min | 1% of smaller dimension | |
| vmax | Viewport Max | 1% of larger dimension | |
| svw | Small Viewport Width | 1% of small viewport width | |
| svh | Small Viewport Height | 1% of small viewport height | |
| lvw | Large Viewport Width | 1% of large viewport width | |
| lvh | Large Viewport Height | 1% of large viewport height | |
| dvw | Dynamic Viewport Width | 1% of dynamic viewport width | |
| dvh | Dynamic Viewport Height | 1% of dynamic viewport height |
Container Query Units
Relative to the nearest ancestor with container-type set.
| Unit | Name | Description | Example |
|---|---|---|---|
| cqw | Container Width | 1% of container width | |
| cqh | Container Height | 1% of container height | |
| cqi | Container Inline | 1% of container inline size | |
| cqb | Container Block | 1% of container block size | |
| cqmin | Container Min | Smaller of cqi or cqb | |
| cqmax | Container Max | Larger of cqi or cqb |
Percentage
Relative to the parent element's corresponding property.
| Unit | Name | Description | Example |
|---|---|---|---|
| % | Percentage | Relative to parent (width for width, font-size for font-size) |
Angle Units
Used for gradients, transforms (rotate), and other angle-based properties.
| Unit | Name | Description | Example |
|---|---|---|---|
| deg | Degrees | Full circle = 360deg | |
| rad | Radians | Full circle = 2pi rad | |
| grad | Gradians | Full circle = 400grad | |
| turn | Turns | Full circle = 1turn |
Time Units
Used for animations and transitions.
| Unit | Name | Description | Example |
|---|---|---|---|
| s | Seconds | Duration in seconds | |
| ms | Milliseconds | 1s = 1000ms |
When to Use What
Use px for:
- - Fixed-size elements (borders, shadows)
- - Fine-grained control needed
- - Small decorative details
- - Images with specific dimensions
Use rem for:
- - Font sizes (accessibility!)
- - Spacing (padding, margin)
- - Global consistency
- - Responsive scaling with root font
Use em for:
- - Component-relative sizing
- - Button padding (scales with text)
- - Icon sizes relative to text
- - Nested typography modules
Use vw/vh for:
- - Full-screen sections
- - Hero banners (100vh)
- - Viewport-relative typography
- - Fluid layouts without breakpoints
Use % for:
- - Fluid grid layouts
- - Container-relative widths
- - Flexible images
- - Aspect ratio containers
Use ch for:
- - Optimal line length (45-75ch)
- - Input field widths
- - Code blocks
- - Monospace content
Pro Tips
Accessibility: Always use rem for font sizes. Users who increase their browser's base font size will benefit from proper scaling.
Mobile Safari: Use dvh instead of vh to avoid issues with the URL bar changing the viewport height.
Line Length: For readability, set max-width: 65ch on text containers to maintain optimal character count per line.
Clamp: Combine units with clamp(min, preferred, max) for fluid typography: font-size: clamp(1rem, 2.5vw, 2rem)
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes