Your Search Results


    Our volunteers haven't translated this article into فارسی yet. Join us and help get the job done!


    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.


    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>

    The above HTML will output:

    Width: 50%, Left margin: 20%
    Width: 30%, Left margin: 60%


    <div style="font-size:18px;">
      Full size text (18px)
      <span style="font-size:50%;">50%</span>
      <span style="font-size:200%;">200%</span>

    The above HTML will output:

    Full size text (18px) 50% 200%


    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.

    Browser Compatibility

    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
    Basic support yes yes yes yes yes

    See also

    Document Tags and Contributors

    Last updated by: jsx,