331 Contributors: 23 Wednesday, April 12, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial:
Roadmap: roadmap

Length Units


A CSS distance measurement is a number immediately followed by a length unit (px, em, pc, in, …)

CSS supports a number of length measurements units. They are absolute or relative.


  • valueunit
  • 1em


%Define sizes in terms of parent objects or current object dependent on property
emRelative to the font-size of the element (2em means 2 times the size of the current font)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport*
vhRelative to 1% of the height of the viewport*
vminRelative to 1% of viewport's* smaller dimension
vmaxRelative to 1% of viewport's* larger dimension
ininches (1in = 96px = 2.54cm)
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)
sseconds (used for animations and transitions)
msmilliseconds (used for animations and transitions)
exRelative to the x-height of the current font
chBased on the width of the zero (0) character
frfractional unit (used for CSS Grid Layout)


  • A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

  • For some CSS properties, negative lengths are allowed.

Related Examples