Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
U kunt het artikel ook in het English (US) lezen.

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.

Note: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.

Syntax

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.

Interpolation

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.

Examples

Width and margin-left

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

Font-size

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

Specifications

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.

Browser Compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Documentlabels en -medewerkers

Laatst bijgewerkt door: fscholz,