CSS <percentage> Data Type

The CSS <percentage> data type denotes an integer number, positive or negative.

When you see <percentage> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be a valid percentage.

A percentage consists of a <number> followed by a % (percent sign).

Here are examples of valid <percentage> values:

A `<percentage>` Example

The width property allows the following values.

That definition includes the <percentage> type (among others). So if you decide to use a percentage value, you could write something like this:

Here's a working example:

<style>
.outer {
  background: gold;
}
.inner {
  background: limegreen;
  width: 80%;
}
</style>
<div class="outer">
  Outer
  <div class="inner">
    Inner
  </div>
</div>

Percentage of What?

Percentage values are always relative to another quantity, for example a length.

In the CSS specifications, each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, a measurement of the formatting context (e.g. the width of a containing block), or something else.

Here are some examples of percentage values along with an explanation of what each percentage value is relative to:

width: 80%; 
/* Relative to the parent container's content width */

height: 80%; 
/* Relative to the parent container's content height */

padding: 5%; 
/* Relative to the width of the generated box's containing block. */

margin: 5%; 
/* Relative to the width of the generated box's containing block. */

font-size: 120%;
/* Relative to the inherited font size */

line-height: 140%;
/* Relative to the font size */

rgb(20%,80%,0%)
/* 
Relative to the maximum value for the respective color channel in the sRGB gamut.
In other words, 20% red, 80% green, 0% blue.
*/

rgba(20%,80%,0%,50%)
/* Same as previous but also includes 50% opacity for the alpha channel (100% is fully opaque). */

hsl(0,50%,75%);
/* Relative to the maximum value for the saturation and lightness respectively. */

hsla(0,50%,75%,50%);
/* Same as previous but also includes 50% opacity for the alpha channel (100% is fully opaque). */

voice-pitch: 50%;
/* Increments the voice pitch relative to the inherited value. */

voice-pitch: -50%;
/* Decrements the voice pitch relative to the inherited value. */

Combining Percentages with Dimensions or Numbers

There are cases where a percentage value will represent the same quantity as a dimension or number. In these cases, the percentage can be used in a calc() function where it can be combined with another dimension or number.

Here's an example:

In this case, both values are converted to absolute lengths and added together.

When a CSS property allows percentage values to be used in this way, the CSS specification may use the following notations:

<length-percentage>: Equivalent to [ <length> | <percentage> ], where the <percentage> will resolve to a <length>.
<frequency-percentage>: Equivalent to [ <frequency> | <percentage> ], where the <percentage> will resolve to a <frequency>.
<angle-percentage>: Equivalent to [ <angle> | <percentage> ], where the <percentage> will resolve to a <angle>.
<time-percentage>: Equivalent to [ <time> | <percentage> ], where the <percentage> will resolve to a <time>.
<number-percentage>: Equivalent to [ <number> | <percentage> ], where the <percentage> will resolve to a <number>.

CSS Specifications