CSS <length> Data Type

Description

The CSS <length> data type represents a distance value. It is a dimension, which means it consists of a valid number immediately followed by a unit identifier (with no space between the number and the unit identifier).

Lengths can be used in numerous CSS properties, such as width, height, margin, padding, font-size, and text-shadow.

There are two types of length units: absolute and relative.

  • Absolute units are based on a fixed physical size, such as pixels (px) or inches (in).
  • Relative units are based on a percentage of another element's size, such as ems (em) or rems (rem).

Some common length units include:

  • px (pixels): The most common absolute unit, representing the physical size of a single pixel on the user's display.
  • em (ems): A relative unit equal to the font size of the parent element.
  • rem (root ems): A relative unit equal to the font size of the root element (usually the <html> element).
  • % (percent): A relative unit equal to a percentage of the containing element's size.

Examples:

/* Absolute unit */
width: 100px; /* 100 pixels wide */

/* Relative unit */
margin: 1em; /* 1em margin on all sides */

/* Percentage unit */
font-size: 50%; /* 50% of the parent element's font size */

Note: Some CSS properties allow negative length values, while others do not. Be sure to check the documentation for the specific property you are using.

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

The following table will show you the current browser support for the CSS length data type.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 7th October 2023