Get to know MDN better
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.
Note: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.
The <percentage> data type consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.
When animated, values of the <percentage> data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.
| CSS Values and Units Module Level 4 # percentages |
Enable JavaScript to view this browser compatibility table.
This page was last modified on Apr 20, 2026 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.