CSS Length Units

Types of Units

CSS units can be grouped into distinct types. Some are absolute, meaning they map to a fixed physical size. Others are relative, sizing themselves according to some other value, such as the font size of a parent element or the viewport's dimensions. There are also units for angles, time, and resolution, each serving a particular set of properties.

Absolute Lengths

On screens, most absolute units are tied to a reference pixel. The specification defines the classic set: px for pixels, cm for centimeters, mm for millimeters, in for inches (exactly 96 pixels), pc for picas (1/6 of an inch), and pt for points (1/72 of an inch). While these originate from physical media, they are all defined relative to the CSS pixel for consistent rendering regardless of the device's actual resolution.

Relative Units

Relative units are far more flexible. They are computed from an external reference rather than a fixed size. The most common are the font-relative units:

• em is relative to the font size of the current element (for font properties) or the parent element (for other properties).
• rem refers to the root element's (``) font size, simplifying scalable typography from the top down.
• ch measures the advance width of the "0" (zero) glyph in the current font.
• ex corresponds to the x-height of the font — the height of a lowercase "x".

Viewport units are another major category. Introduced to handle responsive layouts without JavaScript, they respond to the size of the browser window:

• vw is 1% of the viewport's width.
• vh is 1% of the viewport's height.
• vmin equals the smaller of vw and vh.
• vmax equals the larger of the two.

The specification's newer additions extend the viewport and font-relative families. vi and vb are 1% of the viewport's inline and block axis sizes, respectively. On the font side, cap reports the cap height (the height of capital letters), ic uses the width of the "水" (CJK ideographic) glyph, and lh and rlh follow the built-in line-height for the current element or the root element, respectively.

Furthermore, container query units have arrived. These are relative to the size of a query container rather than the whole viewport, enabling components to scale within their own layout context. The units cqw, cqh, cqi, cqb, and cqmin/cqmax work in a manner parallel to viewport units but target the container.

Percentages, Angles, Time, and Beyond

Percentages are unique: they are not truly lengths but resolve to lengths depending on the property they are assigned to. The spec treats them as a separate unit category, often needing to be defined contextually—for font sizes, they reference the parent font size, while for widths, they reference the containing block's width.

When elements are rotated, we need angle units. The spec includes deg (degrees, 1/360 of a full rotation), rad (radians, matching mathematical conventions), grad (gradians, with 400 per full rotation), and turn (whole revolutions). For animations and transitions, time is measured in seconds (s) and milliseconds (ms). Finally, there are resolution units for media queries and images: dpi (dots per inch), dpcm (dots per centimeter) and dppx (dots per pixel). Note that the exact rendering of some newer units is still being refined as the level 4 specification matures.

Quick Reference

Number Types and Units

• Integers: unit-less whole numbers, e.g. 3
• Numbers: integers with decimals, e.g. 3.2
• Dimensions: a number with a unit, e.g. 3.2rem
• Ratios: quotients of two divided numbers, e.g. 3/2
• Percentages: relative values, e.g. 3%

Absolute Length Units

img {
  max-width: 500px;
}

/* Double the resolution and above */
@media (min-resolution >= 2dppx) {
  img {
    max-width: 100%;
  }
}

Relative Units

<div class="box">
  I am 200 pixels tall
</div>

.box {
  height: 200px;
}

<div class="box">
  I am 200 pixels tall and 50% wide
</div>

.box {
  height: 200px;
  width: 50%;
}

Percentages

Font-Relative Units

Viewport-Relative Units

• svh: the “small” viewport height, matching the keyboard-open state.
• lvh: the “large” viewport height, when the keyboard is out of view.
• dvh: a dynamic value that updates as the keyboard appears or hides.
• dvmin / dvmax: the lesser or greater of the dynamic viewport dimensions.

Container-Relative Units

.parent-container {
  container-type: inline-size;
}

.child-element {
  background: rebeccapurple;
  width: 100%;

  @container parent (width > 30ch) {
    .child-element {
      background: dodgeblue;
      width: 50cqi;
    }
  }
}

Unit-less Numbers

aspect-ratio: 2 / 1; /* Ratio */
column-count: 3; /* Specifies a number of columns */
flex-grow: 1; /* Allows the element to stretch in a flex layout */
grid-column-start: 4; /* Places the element on a specific grid line */
order: 2; /* Sets the order of elemnents in a flex or grid layout */
scale: 2; /* The elementis scaled up or down by a factor */
z-index: 100; /* Element is placed in a numbered layer for stacking */
zoom: 0.2;  /* The element zooms in or out by a factor */

border: 0; /* No border */
box-shadow: 0 0 5px #333; /* No shadow offset */
margin: 0; /* No margin */
padding: 0; /* No padding */

Custom Units with @property

/* 👎 */
.element {
  --hue: 0;
  
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);
}

@keyframes rainbow {
  from { --hue: 0; }
  to { --hue: 360deg; }
}

@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

/* 👍 */
@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.element {
  --hue: 0;
  
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);
}

@keyframes rainbow {
  from { --huw: 0; }
  to { --hue: 360deg; }
}

Practical Unit Choices

.element {
  background: linear-gradient(
    135deg, red, blue;
  )
}

.element {
  background: hsl(0 100% 10%);
}

.element {
  background: hsl(0 100% 10% / 0.5); /* or simply .5 */
}

Use rem and em for font sizes

html {
  font-size: 18px; /* Inherited by all other elements */
}

.parent {
  font-size: 1rem; /* Updates when the `html` size changes */
}

.child {
  font-size: 1em; /* Updates when the parent size changes */
}

Write 0 without a unit

Prefer container units for component-level responsive sizing

.parent {
  container: my-container / inline-size; /* Looks at width */
}

.child {
  display: flex;
  flex-direction: column;
  max-width: 100vh; /* 100% of the viewport */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
  .child {
    flex-direction: row;
    max-width: 50%; /* 50% of the parent elenent */
  }
}

.parent {
  container: my-container / inline-size; /* Looks at width */
}

.child {
  display: flex;
  flex-direction: column;
  max-width: 100cqi; /* 100% of the container */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
  .child {
    flex-direction: row;
    max-width: 50cqi; /* 50% of the container */
  }
}

Use percentages when you don't have a container

Use viewport units for full-page layouts

Worked Examples

em and rem in action

20px * 1.5 = 30px

/* This is the browser's default font size */
html {
  font-size: 16px;
}

.box {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

html {
  font-size: 18px;
}

.box {
  font-size: 1.5rem; /* 18px * 1.5 = 27px */
}

The ch character unit

<p>The big brown dog lazily jumped over the fence.</p>

p {
  width: 10ch;
}

The lh line-height unit

.parent {
  line-height: 1.5;
}

.child {
  height: 3lh; /* 3 * 1.5 = 4.5 */
}