CSS Measurement Units

Measurement Units in CSS: CSS has several measurement units to express a length. Most of the CSS properties take “length” values, like width, margin, padding, font-size, etc. A length is a number which is followed by a length unit, such as 15px, 3em, etc. A whitespace can’t be declared between the number and unit. Hence, the value is zero(0), then the unit can be eliminated. For a few CSS properties, negative lengths are applicable.

Types of CSS Measurement Units

There are two types of length units in CSS Measurement Units and those are absolute and relative.

Absolute Lengths

These absolute length units are fixed and the length expressed exactly that size. Absolute length units are not used on-screen, because of the variation of screen sizes. They may be used if the output medium is known as the print layout.

cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

NOTE: Pixels (px) are relative to the display device. For low-dpi devices, 1px is one device pixel (dot) of the display. For high-resolution screens and printers, 1px implies multiple device pixels.

Relative Lengths

Relative length units provide a length relative to another length property. The relative length provides the difference between specified mediums

em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the “0” (zero)
rem Relative to font-size of the root element
vw  Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport’s* smaller dimension
vmax Relative to 1% of viewport’s* larger dimension

NOTE: % Relative to the parent element