CSS <length> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<p class="box">Example of the length CSS data type.</p>

CSS

.box {
    border: 2px solid purple;
    padding: 10px;
    position: fixed;
    top: 0.5in;
    right: 2em;
    width: 25%;
    width: 25vw;
}

Result

Editor

Browser Support

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

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	1	1	37

Last updated by CSSPortal on: 7th October 2023

Support Us