Given:
.parent { font-size: 20px; line-height: 150%; }
.child { font-size: 10px; }
.child is inside .parent and declares no line-height of its own. What line height does .child use?
15px — the inherited percentage is re-resolved against the child's own font size.
10px — a percentage line-height always ends up equal to the element's font size.
30px — the percentage is computed on the parent (20px × 150% = 30px) and it is that computed length that the child inherits.✓Правильный ответ
20px — line-height is inherited together with the parent's font size, so the child effectively uses the parent's metrics.
Объяснение
A percentage line-height is resolved where it is declared: 150% of the parent's 20px computes to 30px, and a computed length is what descendants inherit. The child's own 10px font size never enters the calculation, so its lines are spaced 30px apart — usually far more than intended. Had the parent written the unitless line-height: 1.5, the number itself would be inherited and the child would recompute 1.5 × 10px = 15px. That difference is the reason unitless numbers are the usual recommendation for line-height.