The <percentage> CSS data type represents a percentage. The format of a percentage value is a <number> immediately followed by %. No space is allowed between the number and the %.
Percentage values are always relative to another value. The value that the percentage is relative to can be either a value from the element’s parent or from another property of the element itself. For example, if an element’s width is set to 50%, this means that its computed width will be half of that of its parent. On the other hand, when the element’s line height is set in percentages, its value will be computed relative to the value of the element’s font size, not its parent’s. (See examples and demos below)
Also, percentage values don’t cascade as percentages, only calculated (computed) values are inherited. Which means that when a child element inherits the value of a property from its parent, whether by default or with the inherit keyword, the actual value inherited by the child is not a percentage, it is the result of computing that percentage relative to some value it was set in relation to. For example, in the following, the children of the p element will inherit a value of 12px for line-height, not the percentage value (120%):
p {
font-size: 10px;
line-height: 120%;/* 120% of 'font-size' */
}
The line height of the paragraph was set relative to the font size. The line height’s value is computed, the result is 12px in this case, and then it is the computed value that is passed along and inherited by any child elements of that paragraph.
A lot of CSS properties take percentage values, such as width, line-height, and font-size, among others.
Transitioning <percentage>s
Percentages in CSS are transitionable. They are interpolated as real, floating-point numbers. The speed at which the transition takes place is specified using a CSS timing function.
Note that even though percentages as a value as transitionable, this does not mean that any property that takes a percentage as a value is animatable. For a list of animatable properties, refer to this list and this list in the CSS Transitions specification.
Examples
The following will set the width of the .child element to be 70% of the width of its parent. The element’s line height will be set to 140% of the value of its own font size.
.child {
width: 70%; /* relative to the width of its container */
font-size: 16px;
line-height: 140%; /* relative to its font size */
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
Percentage values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.
