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

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

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

• 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
3	12	1	1	3.5	1
Tablets / Mobile
≤37	18	4	10.1	1	Yes

Last updated by CSSPortal on: 9th December 2019