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.

Example:

• px,
• em,
• etc …

Recommended

The recommended unit scales are:

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

Type

There are two types of length units:

• relative.
• absolute.

When the physical properties of the output medium are

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

Relative

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

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
• pt: points
• pc: picas — 1 pica is equal to 12 points.

Example(s):

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

• Style/Examples/007/units.en.html