<percentage>

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!

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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sheppy, zziccardi, teoli, BijuGC, kscarfone, Mgjbot, myakura, roryokane, gregtyler
Zuletzt aktualisiert von: teoli,
Seitenleiste ausblenden