Login

u/FormalFearless7570

r/css
Image 1 — I wrote a reference for every CSS unit in the language — all 63 of them
Image 2 — I wrote a reference for every CSS unit in the language — all 63 of them
Image 3 — I wrote a reference for every CSS unit in the language — all 63 of them
Image 4 — I wrote a reference for every CSS unit in the language — all 63 of them
▲ 36 r/css

I wrote a reference for every CSS unit in the language — all 63 of them

I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.

And somehow, after years of using CSS, I still found a few things I’d never properly stopped to think about:

  • vh and lvh are actually the same size. svh keeps space for the browser UI even when it disappears, while dvh changes as the UI moves.
  • 1in is always 96px on a screen. Not “roughly.” By definition. Which also means cm, mm, pt, pc, and Q aren’t really physical units either.
  • CSS doesn’t have 6 viewport units. It has 24. w, h, i, b, min, and max — each in v*, sv*, lv*, and dv* versions.

The guide goes from the familiar stuff — px, %, em, rem — into viewport and container units, fr, angles, time, resolution, and what happens when you start mixing all of them inside calc() and clamp().

There’s also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise “supported in modern browsers.”

And if you’d rather keep the whole thing around, there’s a PDF version too.

https://cssunits.com

Enjoy :) And if I got something wrong, let me know. I’ll fix it.

u/FormalFearless7570 — 5 days ago