CSS - (Length) Unit

What is the unit in CSS ?

The unit in CSS is the second element of a length that defines the type of the length number.


  • px,
  • em,
  • etc …

The recommended unit scales are:

  • Screen: rem, em, px, %
  • Print: em, cm, mm, in, pt, pc, %


There are two types of length units:

When the physical properties of the output medium are

  • unknown, use relative unit
  • known, use absolute unit.


Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

Relative units are:

  • em: the font-size of the element (of its parent)
  • rem: font size of the root element of the document.
  • ex: the 'x-height' of the relevant font
  • px: pixels, relative to the viewing device
  • %: percentage - each element defines to which the percentage refers
  • sizes relative to the reader's window:
    • vw : 1/100th of the window's width
    • vh. 1/100th of the window's height.
    • vmin the smallest of vw and vh.
    • vmax the greatest of vw and vh

More … CSS - Relative Sizing (Length)


Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:

  • in: inches — 1 inch is equal to 2.54 centimeters.
  • cm: centimeters
  • mm: millimeters
  • pc: picas — 1 pica is equal to 12 points.


h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */

In cases where the used length cannot be supported, user agents must approximate it in the actual value.

Documentation / Reference

Powered by ComboStrap