line-height in CSS was not designed by a typographer. It's not really related to the print world.
What line height specifies is the 'minimum height of the row inline objects will fit in to.
It's not directly related to font size.
For example, if you set your line-height to 24px, it simply means that each row will be a minimum of 24px height. Whether you put 10px type in that row or 20px type, the rows will still be the same height. The text will merely be centered in that row. There is no real correlation to the font's baseline.
All 3 paragraphs use the same line-height, but different font-size. Note that they roughly line up, but in the center of the line--not along their baselines.
If the question is actually about
font-size vs. the rendered size of the glyph on screen, that's an entirely different topic. See this answer here for a visual explanation of that relation: What does the size of the font translate to exactly?