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.

<div style="background-color:navy;">   <div style="width:50%; margin-left:20%; background-color:chartreuse;">     Width: 50%, Left margin: 20%   </div>   <div style="width:30%; margin-left:60%; background-color:pink;">     Width: 30%, Left margin: 60%   </div> </div> 

<percentage>

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.

Syntax

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.

Interpolation

When animated, values of the <percentage> data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the timing function associated with the animation.

Examples

Width and margin-left

<div style="background-color:navy;">   <div style="width:50%; margin-left:20%; background-color:chartreuse;">     Width: 50%, Left margin: 20%   </div>   <div style="width:30%; margin-left:60%; background-color:pink;">     Width: 30%, Left margin: 60%   </div> </div> 

The above HTML will output:

Font-size

<div style="font-size:18px;">   <p>Full-size text (18px)</p>   <p><span style="font-size:50%;">50% (9px)</span></p>   <p><span style="font-size:200%;">200% (36px)</span></p> </div> 

The above HTML will output:

Specifications

Specification
CSS Values and Units Module Level 5 # percentages

See also

<length-percentage> CSS Values and Units

Last modified: Nov 21, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change language