CSS - Line height property, how it works (simple)

Question

So in this simple example I have as final result:

This is a very simple question but I sim

Answer 1

Already been answered, but I thought I might add that the formula is usually is:

The difference between line-height and font-size is called Leading. Then divide this Leading by 2 to get half-leading, which is put above and below your text causing it to be vertically centered.

The following set of slides will explain a lot about line-height. You can start at slide 72 for what I explained above, but I would recommend going through the whole set.

Answer 2

Ok I'm quite sure I got it now, I'll answer my own question, thanks to all you answers this would be a more graphical explanation (which always helps me):

This is just a complement to jarret's answer (the first one to nail it IMHO)

Thanks for all the helpful answers

BTW: Sorry for the horrid artwork.