Definition and Usage
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.
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.
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.
<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>
<div style="font-size:18px;"> Full size text (18px) <span style="font-size:50%;">50%</span> <span style="font-size:200%;">200%</span> </div>
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||1.0||1.0 (1.0)||<=5.0||yes||1.0 (85)|
|Feature||Android||Firefox Mobile (Gecko)||IE Phone||Opera Mobile||Safari Mobile|