CSS - (Length) Unit

Boxdim

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, %

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.

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





Discover More
Boxdim
CSS - Length Value (Size)

Lengths refer to horizontal or vertical measurements. The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier where: number is positive...
CSS - Point (pt or pts) unit

Point (pt or pts) is a length unit commonly used in the print industry to get device pixel perfect mapping. It's then commonly used with the print media. One point is equivalent to 4/3 physical...
Boxdim
CSS - Relative Sizing (Length)

Relative Sizing is when you are using a length units that is relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a...
CSS - font-size property

CSS CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative...



Share this page:
Follow us:
Task Runner