ā¤ Like
š Save
š Share
@thedevspaceio
CSS Units Cheatsheet
š CSS Units Cheatsheet
CSS units define how sizes, distances, and durations are measured. Choosing the right unit makes layouts responsive, accessible, and maintainable across devices.
ā Absolute units ā Relative units ā Viewport units ā Container query units ā Character units ā Flexible units ā Angle units ā Time units ā Frequency units ā Resolution units ā Modern fluid sizing
#css #units #responsive #viewport #rem #em #clamp #containerqueries #flexbox #grid
Absolute units
| Unit | Description |
|---|---|
px | Device pixels (logical). Use for precise control, but combine with relative units for responsiveness. |
pt | Print-focused point unit; rarely used for web layout. |
pc | Picas; 1pc = 12pt. Print-focused. |
cm | Centimeters; print-focused. |
mm | Millimeters; print-focused. |
q | Quarter-millimeters; 1q = 0.25mm. Print-focused. |
in | Inches; print-focused. |
Relative units
| Unit | Description |
|---|---|
em | Relative to the element's font-size. Useful for component-relative sizing. |
rem | Relative to the root (html) font-size. Great for global scaling. |
% | Relative to the parent property (width, height, etc.). Context-dependent. |
cap | Relative to the height of a capital letter. |
ic | Relative to the width of a CJK ideographic character. |
lh | Relative to the element's line-height. |
rlh | Relative to the root element's line-height. |
ex | Relative to the x-height of the font. |
Viewport units
| Unit | Description |
|---|---|
vw | 1% of viewport width. Useful for full-viewport sections. |
vh | 1% of viewport height. |
vmin | 1% of the smaller viewport dimension. |
vmax | 1% of the larger viewport dimension. |
vi | 1% of viewport inline size. |
vb | 1% of viewport block size. |
svw | 1% of small viewport width. |
svh | 1% of small viewport height. |
svmin | 1% of the smaller small-viewport dimension. |
svmax | 1% of the larger small-viewport dimension. |
lvw | 1% of large viewport width. |
lvh | 1% of large viewport height. |
lvmin | 1% of the smaller large-viewport dimension. |
lvmax | 1% of the larger large-viewport dimension. |
dvw | 1% of dynamic viewport width. |
dvh | 1% of dynamic viewport height. |
dvmin | 1% of the smaller dynamic-viewport dimension. |
dvmax | 1% of the larger dynamic-viewport dimension. |
Container query units
| Unit | Description |
|---|---|
cqw | 1% of the container's width. |
cqh | 1% of the container's height. |
cqi | 1% of the container's inline size. |
cqb | 1% of the container's block size. |
cqmin | 1% of the smaller container dimension. |
cqmax | 1% of the larger container dimension. |
Character units
| Unit | Description |
|---|---|
ch | Width of the 0 (zero) character. Helpful for monospace width approximations. |
ex | x-height of the font. Less consistent across fonts. |
Flexible units
| Unit | Description |
|---|---|
fr | Fractional unit used in CSS Grid to allocate remaining space. |
Angle units
| Unit | Description |
|---|---|
deg | Degrees. |
rad | Radians. |
grad | Gradians. |
turn | Full turns. |
Time units
| Unit | Description |
|---|---|
s | Seconds. |
ms | Milliseconds; 1s = 1000ms. |
Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.
www.thedevspace.io