Overview of all CSS units

I recently came upon the CSS unit 'dvh' because I needed its functionality for a website project I was working on. I never noticed that this unit existed, so I took a look at what else I have been missing.

When I started with HTML/CSS, we had a these useful 9 units:

px, %, em, ex, cm, mm, in, pt and pc

Today, apparently it has grown to these 42:

px, %, em, ex, cm, mm, in, pt, pc,
vh, vw, rem, vmin, vmax, lvh, lvw, 
swh, svw, svb, svi, dvh, dvw, dvb, dvi,
dvmin, dvmax, Q, cqw, cqh, cqi, cqb,
cqmin, cqmax, ch, rch, lh, rlh, cap, rcap, ic, ric, rex

Some of these appear to be very useful, here is a short overview of all of them:

px
Pixels, absoulte length unit.

%
Percentage, relative unit.

em
Font size of the element. If you have a font size of 12px, then 1em is 12px.

rem
Same as em, but for the font size of the root element.

ex
Relative to the height of the lowercase "x" in the current font. Example: font-size: 2ex;

cm
Represents a length in centimeters. Example: width: 5cm;

mm
Represents a length in millimeters. Example: height: 10mm;

in
Represents a length in inches (1in = 2.54cm). Example: border: 1in solid black;

pt
Represents a length in points (1pt = 1/72 of an inch). Example: font-size: 12pt;

pc
Represents a length in picas (1pc = 12pt). Example: width: 5pc;

vh
Represents a percentage of the viewport height (1vh = 1% of viewport height). Example: height: 50vh;

vw
Represents a percentage of the viewport width (1vw = 1% of viewport width). Example: width: 75vw;

rem
Relative to the font size of the root element (). Example: font-size: 2rem;

vmin
Represents a percentage of the smaller viewport dimension (width or height). Example: font-size: 5vmin;

vmax
Represents a percentage of the larger viewport dimension (width or height). Example: padding: 3vmax;

lvh
Large viewport height, based on the largest possible viewport height during page load. Example: height: 100lvh;

lvw
Large viewport width, based on the largest possible viewport width during page load. Example: width: 100lvw;

swh
Small viewport height, based on the smallest possible viewport height. Example: height: 100swh;

svw
Small viewport width, based on the smallest possible viewport width. Example: width: 100svw;

svb
Small viewport block size, based on the smallest block dimension (depends on writing mode). Example: block-size: 80svb;

svi
Small viewport inline size, based on the smallest inline dimension (depends on writing mode). Example: inline-size: 80svi;

dvh
Dynamic viewport height, adjusting as the viewport resizes (e.g., when keyboard appears). Example: height: 100dvh;

dvw
Dynamic viewport width, adjusting as the viewport resizes. Example: width: 100dvw;

dvb
Dynamic viewport block size, adjusting dynamically in the block direction. Example: block-size: 90dvb;

dvi
Dynamic viewport inline size, adjusting dynamically in the inline direction. Example: inline-size: 90dvi;

dvmin
The smaller of dvh or dvw, adjusting dynamically. Example: gap: 2dvmin;

dvmax
The larger of dvh or dvw, adjusting dynamically. Example: margin: 3dvmax;

Q
Represents a quarter-millimeter (1Q = 1/4mm). Example: border-width: 4Q;

cqw
Container query width, relative to the query container's width. Example: width: 50cqw;

cqh
Container query height, relative to the query container's height. Example: height: 40cqh;

cqi
Container query inline size, relative to the query container’s inline size. Example: max-width: 60cqi;

cqb
Container query block size, relative to the query container’s block size. Example: max-height: 60cqb;

cqmin
The smaller of cqi or cqb, based on the container. Example: padding: 5cqmin;

cqmax
The larger of cqi or cqb, based on the container. Example: border-radius: 5cqmax;

ch
Relative to the height of the "0" character in the current font. Example: width: 20ch;

rch
Relative to the root element’s ch unit. Example: line-height: 1.5rch;

lh
Relative to the line height of the current element. Example: margin-bottom: 1lh;

rlh
Relative to the root element’s lh unit. Example: height: 2rlh;

cap
Relative to the height of capital letters in the current font. Example: max-height: 3cap;

rcap
Relative to the root element’s cap unit. Example: padding-top: 2rcap;

ic
Relative to the width of the "?" (water) ideograph in the current font. Example: column-width: 5ic;

ric
Relative to the root element’s ic unit. Example: grid-gap: 1ric;

rex
Relative to the root element’s ex unit. Example: height: 2rex;


While developing my free website builder, it was never necessary to use all of them at all - more like only 20% to be honest.

But from time to time users request support for some of these - Em and Rem are the most popular ones right now requested, so I'll likely add them soon.


42 units in CSS may appear to be quite a bit excessive, but CSS started with 8 or 9 units in 1996 - nearly 30 years ago (!) and now has these 42 units which all are quite useful and make sense in their specific areas, in my opinion.