A block-level child sits inside a containing block that is 400px wide and 200px tall, in a horizontal writing mode. The child declares padding-top: 25%. What top padding does it get?
50px — for the top and bottom sides, a percentage resolves against the containing block's height.
0 — percentages are not valid for padding-top, so the declaration is dropped.
100px — every percentage padding resolves against the inline size of the containing block, which here is its 400px width.✓Correct answer
25px — the percentage resolves against the child's own computed height.
Explanation
All four padding percentages, including padding-top and padding-bottom, resolve against the containing block's inline size — its width in a horizontal writing mode. So 25% of 400px is 100px, and the container's 200px height plays no part. The 50px answer is the intuitive-but-wrong assumption that vertical percentages use the vertical dimension. This rule is exactly what makes the classic padding-bottom aspect-ratio trick work: a percentage padding on the block axis tracks the element's width.