mozilla
Your Search Results

    <percentage>

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

    Summary

    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.

    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

    <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:

    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>
    </div> 
    

    The above HTML will output:

    Full size text (18px) 50% 200%

    Specifications

    Specification Status Comment
    CSS Values and Units Module Level 3 Candidate Recommendation No significant change from CSS Level 2 (Revision 1)
    CSS Level 2 (Revision 1) Recommendation No change from CSS Level 1
    CSS Level 1 Recommendation  

    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

    Contributors to this page: Sheppy, zziccardi, teoli, BijuGC, kscarfone, Mgjbot, myakura, roryokane, gregtyler
    Last updated by: teoli,
    Hide Sidebar