wtf(css)layout you can see happening
← wtf(css)
Explain the wtf

line-height: 1.5 vs 150%

MediumThe famous WTFsW12

line-height: 150% on the article. Every paragraph looks right except the big one, whose two lines are sitting on top of each other. Its line-height is inherited, correct, and 24px — for 32px text.

The article sets a line height once, at the top, and everything inherits it. The body paragraph is fine. The lead — 32px text — has two lines that overlap, and its box is half the height it should be. Make the lead 600×96 (two lines at 1.5 × 32px) and the body 600×48 (two lines at 1.5 × 16px), with the paragraphs stacked flush. Typing the lead's line height in as a length will pass three of the four checks. The fourth changes its font size and asks the line height to follow.

Hint

The article's line height is inherited by both paragraphs. Is what gets inherited a ratio, or a number of pixels?

Live preview800×600
Your stylesheet
checked in a real browser, four ways
The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<article class="post"><p class="lead">Ship the thing<br>on Friday</p><p class="body">Nobody has read<br>this paragraph</p></article>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font-family: system-ui, -apple-system, sans-serif; }
.post { width: 600px; font-size: 16px; background: #16161d; }
.post p { margin: 0; }
.lead { font-size: 32px; background: #22323f; }
.body { font-size: 16px; background: #2a2a36; }