<percentage> | CSS Types & Functions

A CSS data type representing a value relative to something else (usually the parent element's size or another property's value).

Quick example

.child {
  /* Takes up exactly half the width of its parent */
  width: 50%;
  /* Sets the font size relative to the parent's font size */
  font-size: 120%;
}

All units

Percentage

A value relative to another value. The reference depends on the property: width and inline padding resolve against the parent's inline size, line-height against the element's font size, and so on. Always check the property's spec when in doubt.

Unit	Measures	Notes	Baseline
`%`	Relative to a contextual reference value	What the percentage measures depends entirely on the property: parent width, parent height, font size, line height, etc. The single most context-dependent unit in CSS.	Widely

<percentage> Browser Support

Widely availableSince 201596% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

View on caniuse.com →View on MDN →View on webstatus.dev →View spec →Learn more about Baseline →

12+