CSS units · Depends on the property
%
A percentage resolves against a property-specific reference, often the parent's size.
Key facts
| Reference | Depends on the property |
|---|---|
| Width | Parent content width |
| Height | Parent height, if definite |
| Padding/margin | Parent inline size (width) |
| font-size | Parent font size |
| Standard | CSS Values and Units Level 4 |
The reference is not universal
A percentage is meaningless without knowing what it is a percentage of. Width resolves against the parent's content width; height resolves against a definite parent height and otherwise behaves as auto. Font size resolves against the parent's font size, which is how nested relative text scales.
The surprise is padding and margin: percentages for all four sides, including top and bottom, resolve against the parent's inline size (the width in horizontal writing). A padding-top: 10% is not 10% of the height.
Percentages in layout
Percentages are useful for fluid widths and for centering with margins, but they depend on the parent having a resolvable size. A percentage height inside an auto-height parent collapses. Flex and grid layouts often remove the need for percentage arithmetic.
For aspect ratios, prefer the aspect-ratio property over the old padding-top trick. It states the intent directly and does not depend on the parent's width.
Frequently asked questions
Why does percentage height not work?
The parent has no definite height. Set an explicit height on the parent or use another layout method.
Is vertical padding a percentage of height?
No. Padding percentages resolve against the inline size, which is the width in horizontal writing.