<percentage>

The <percentage> CSS data type represents a percentage value. Many CSS properties can take <percentage> values, often to define a size as relative to its parent object. Numerous properties can use percentages, such as width, 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

A percentage consists of a <number> followed by the percentage sign %. As with all CSS units, there is no space between the symbol and the number.

Interpolation

In animations, percentages are interpolated as real, floating-point numbers. The interpolation's speed 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>