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.
<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
Width and margin-left
<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
<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) |