What are CSS Percentages?
CSS percentages are relative values whose reference size is defined separately for each property. A percentage may resolve against a containing block, font size, or another computed dimension.
How CSS Percentages work
A percentage token has no universal pixel meaning; the property grammar determines both whether it is allowed and which quantity supplies its basis. Resolution can occur during computed-value or used-value calculation, and an indefinite containing dimension may turn some percentages into auto-like behavior. Percentages can also participate inside functions such as calc() and be mixed with lengths where the grammar permits. They are central to fluid layout, transforms, backgrounds, typography, and positioning.
Key facts
- 1For width, a percentage normally refers to the containing block’s width, while percentage translate() values refer to the transformed element’s own reference box.
- 2Percentage top and bottom padding are based on the containing block’s inline size in common horizontal writing modes, a frequent surprise when building aspect-ratio techniques.
- 3A percentage height needs a resolvable containing-block height in many layout contexts; otherwise it may behave as auto, so height: 100% does not inherently fill free space.
When CSS Percentages matter
Use percentages when an element should scale with its relevant reference dimension rather than remain fixed. Confirm the property’s percentage basis because the same value can resolve differently across width, height, and transforms.