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
.
<length>
value) will be accessible on the inherited property, not the percentage value.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.
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.
<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:
<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:
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | Yes | 1 | Yes | Yes | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/percentage