CSS <length> Data Type

Description

The <length> CSS data type that is used to specify distance measurements using relative or absolute units. It consists of an integer or decimal number followed (without whitespace) by a unit abbreviation; the unit may be omitted if the number is zero (0). Lengths can be used in numerous CSS properties, such as width, height, margin, padding, font-size, and text-shadow.

Syntax

property: <length>

Values

Absolute lengths:
  • cm and mmSpecify centimetres and millimetres.
  • inSpecify inches.
  • pcSpecify picas, 6 per inch.
  • ptSpecify points, 72 per inch.
  • pxSpecify pixels, 96 per inch. These are often referred to as CSS pixels, and do not necessarily correspond to the device's resolution.
Relative lengths:
  • emunits equal the point size (nominal height) of the current font. This is historically based on the mechanical typeset width of the (square) letter "M".
  • remEqual the em size for the document root (usually html)
  • exSpecify the height of the letter "x" in the current font, the general height of lowercase letters without ascenders.
  • chSpecify the width of the numeral "0" in the current font, which is roughly the average for most text characters.
Relative viewport lengths:
  • vwSpecify a percentage of the width of the current viewport, e.g., the window.
  • vhSpecify a percentage of current viewport’s height.
  • vmax and vminspecify the maximum or minimum of the viewport's width or height.

Example

<p class="box">Example of the length CSS data type.</p>
.box {
    border: 2px solid purple;
    padding: 10px;
    position: fixed;
    top: 0.5in;
    right: 2em;
    width: 25%;
    width: 25vw;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
312113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3718410.11Yes

Last updated by CSSPortal on: 9th December 2019