CSS <length> Data Type

CSS <length> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <length> CSS data type represents a measurement of distance or size in CSS. It can be used to define the dimensions of elements, spacing between elements, font sizes, and more. A <length> value can be expressed in absolute units such as pixels (px), centimeters (cm), millimeters (mm), points (pt), and inches (in), or in relative units like ems (em), root ems (rem), percentages (%), viewport width (vw), and viewport height (vh). Absolute units are fixed and do not scale with the user’s settings or viewport, whereas relative units adjust according to context such as the parent element’s font size or the viewport size.

The <length> type is frequently used with CSS properties that expect a measurement, such as width, margin, padding, font-size, and border-width. Because it can accept both absolute and relative values, <length> is highly versatile for responsive design, allowing developers to scale elements consistently across different screen sizes.

When using <length> in CSS, it’s important to understand context-dependent behavior. For example, percentage values often relate to the dimensions of a containing element, whereas em-based values are relative to the font size of the current element. Some CSS functions, like calc(), also work seamlessly with <length> values, enabling dynamic calculations of dimensions.

Examples:

/* Absolute lengths */
div.box {
  width: 300px;
  height: 150px;
  border-width: 2pt;
}

/* Relative lengths */
p.text {
  font-size: 1.2em;
  margin-top: 5%;
  padding: 2rem;
}

/* Using calc() with length */
section.container {
  width: calc(100vw - 40px);
  height: 50vh;
}

The <length> type is essential for precise control over layout, typography, and spacing, giving developers the ability to create both fixed and flexible designs. It is one of the most widely used CSS data types, alongside others like <number> or <percentage>.

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

<div class='container'>

  <h1>CSS &lt;length&gt; examples</h1>

  <div class='row'>

    <div class='box px'><span>150px</span></div>

    <div class='box em'><span>12em</span></div>

    <div class='box rem'><span>8rem</span></div>

    <div class='box percent'><span>30%</span></div>

    <div class='box vw'><span>20vw</span></div>

    <div class='box vh'><span>20vh</span></div>

    <div class='box cm'><span>3cm</span></div>

    <div class='box mm'><span>25mm</span></div>

    <div class='box in'><span>1in</span></div>

    <div class='box pt'><span>36pt</span></div>

  </div>

  <p class='note'>Resize the window to observe vw, vh and percentage changes.</p>

</div>

CSS

:root {
  font-size: 16px;
}

.container {
  width: 800px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

h1 {
  font-size: 1.25rem; /* rem example for typography */
  margin: 0 0 16px 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  font-weight: 600;
}

/* Absolute pixel length */
.px {
  width: 150px; /* px */
  height: 80px;
}

/* Relative to the element's font-size */
.em {
  font-size: 16px; /* 1em = 16px here */
  width: 12em; /* em */
  height: 5em;
}

/* Relative to the root font-size */
.rem {
  width: 8rem; /* rem */
  height: 4rem;
}

/* Percentage relative to the container (.container width) */
.percent {
  width: 30%; /* % */
  height: 50px;
}

/* Viewport width and height */
.vw {
  width: 20vw; /* vw */
  height: 8vw;
}

.vh {
  width: 20vh; /* vh */
  height: 20vh;
}

/* Absolute physical units */
.cm {
  width: 3cm; /* cm */
  height: 1.5cm;
}

.mm {
  width: 25mm; /* mm */
  height: 12mm;
}

.in {
  width: 1in; /* in */
  height: 0.5in;
}

.pt {
  width: 36pt; /* pt (1pt = 1/72in) */
  height: 18pt;
}

.note {
  margin-top: 12px;
  color: #475569;
  font-size: 0.9rem;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS length data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.