The <percentage> CSS data type represents a percentage value. Many CSS properties can take <percentage> values, often to define a size as relative to its parent object. Many CSS properties can use percentages, such as width, margin, padding, font-size, and many others.

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

A percentage consists of a <number> followed by the percentage sign %. As with all CSS units, there is no space between the symbol and the number.

Interpolation

In animations, percentages are interpolated as real, floating-point numbers. The interpolation's speed is determined by the timing function associated with the animation.

Examples

Width and margin-left

<div style="background-color:blue;"> 
  <div style="width:50%;margin-left:20%;background-color:lime;">
    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%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div> 

The above HTML will output:

Specifications

Specification Status Comment
CSS Values and Units Module Level 3
The definition of '<percentage>' in that specification.
Candidate Recommendation No significant change from CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1)
The definition of '<percentage>' in that specification.
Recommendation No change from CSS Level 1.
CSS Level 1
The definition of '<percentage>' in that specification.
Recommendation Initial definition.

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)

Document Tags and Contributors

 Last updated by: mfluehr,