The <percentage> CSS data types represent a percentage value. Many CSS properties can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a <number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number.

Many length properties use percentages, such as width, margin and padding. Percentages can also be seen in font-size, where the size of the text is directly related to the size of its parent.

Note: only calculated values are inherited. So, even if a percentage value is used on the parent property, a real value, like a width in pixel for a <length> value, will be accessible on the inherited property, not the percentage value.

Interpolation

Values of the <percentage> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the timing function associated with the animation.

Examples

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
</div> 

The above HTML will output:

Width: 50%, Left margin: 20%
Width: 30%, Left margin: 60%
<div style="font-size:18px;">
  Full size text (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

The above HTML will output:

Full size text (18px) 50% 200%

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)

See also

Document Tags and Contributors

Last updated by: Sebastianz,