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 | Status | Comment |
---|---|---|
CSS Values and Units Module Level 4The definition of '<percentage>' in that specification. | Editor's Draft | No significant change. |
CSS Values and Units Module Level 3The 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 1The definition of '<percentage>' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<percentage>
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
<percentage> by Mozilla Contributors is licensed under CC-BY-SA 2.5.