CSS - <percentage>

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.

Examples

Width and margin-left

HTML
<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:

Font-size

HTML
<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:

Description  

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.

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

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.

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)

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/percentage

CSS CSS Data Type Layout Reference Web