Absolute Length Units

Absolute length types like px are based on a physical unit of measurement.

px
One pixel. For screen displays, it traditionally represents one device pixel (dot). 1px = 1/96th of 1in.

cm
One centimeter.

mm
One millimeter. 1mm = 1/10th of 1cm.

in
One inch. 1in = 2.54cm = 96px.

pc
One pica. 1pc = 12pt = 1/6th of 1in.

pt
One point. 1pt = 1/72nd of 1in.

Length Stylesheet

.element { width: 10px; }

Relative Font Units

This is a type of length unit which is dependent on the size of a certain character or font size.

ch
Represents the width of the “0” character in the element’s font.

em
Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

ex
Represents the x-height of the element’s font. On fonts with the “x” letter, this is generally the height of lowercase letters in the font.

rem
Represents the font-size of the root element (typically <html>). This is different from em which retrieves its length value from the font size of the element it’s on.

Length Stylesheet

.element { width: 10em; }

Font Size

.element { font-size: 10px; }

Viewport Relative Units

These are length units that are relative to the viewport (visible part of the document).

vh
Can be seen as “viewport height”, this is equal to 1% of the viewport’s height.

vw
Can be seen as “viewport width”, this is equal to 1% of the viewport’s width.

vmin
Equal to the smaller of vw and vh.

vmax
Equal to the larger of vw and vh.

Length Stylesheet

.element { width: 10vw; }

For the best descriptions on CSS length types, check out the MDN docs for <<length>>.

HTML
CSS
Output