CSS - Length Unit

1 - 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 …

The recommended unit scales are:

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

4 - Type

There are two types of length units:

When the physical properties of the output medium are

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

4.1 - 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

More … CSS - Relative Sizing (Length)

4.2 - 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.

5 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap