Edit any field — px and rem stay in sync using the root font-size.
| Unit | Type | Meaning | Example |
|---|---|---|---|
| px | Absolute | One CSS pixel (1/96 inch). Fixed regardless of context. | border: 1px solid |
| rem | Relative | Relative to the root (<html>) font-size. Best for scalable layouts. | font-size: 1.5rem |
| em | Relative | Relative to the current element's font-size. Compounds when nested. | padding: 0.5em |
| % | Relative | Percentage of the parent's corresponding value. | width: 50% |
| vw / vh | Viewport | 1% of viewport width / height. | height: 100vh |
| vmin / vmax | Viewport | 1% of the smaller / larger viewport dimension. | font-size: 5vmin |
| ch | Relative | Width of the "0" glyph in the current font. Great for text columns. | max-width: 60ch |
| ex | Relative | x-height of the current font. | height: 2ex |
| fr | Grid | A fraction of free space in a CSS grid. | grid-template-columns: 1fr 2fr |
| pt | Absolute | Point = 1/72 inch. Common in print. | font-size: 12pt |
| pc | Absolute | Pica = 12pt. | margin: 1pc |
| cm / mm / in | Absolute | Physical units; mainly for print stylesheets. | width: 21cm |
| dvh / svh / lvh | Viewport | Dynamic / small / large viewport height (mobile URL-bar aware). | height: 100dvh |
| deg / turn / rad | Angle | Angles for transforms & gradients. 1turn = 360deg. | rotate(45deg) |
| s / ms | Time | Seconds / milliseconds for animations. | transition: .3s |