How CSS line-height is measured?

Question

Is line-height in CSS goes from the bottom of the text to the bottom of the next line's text? or is text is vertically centered inside of the line?

Please see the example image:

Answer 1

Form MDN :

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.

As you can see in this DEMO and the folowing image. This means that for text, line-height defines the height of the box surounding the letters vertically centered inside that box so your first example is right.

Image from www.w3.org