Tratando de entender la propiedad line-height

La propiedad line-height puede resultar algo confusa ya que, por lo general, es "invisible"; por ejemplo, si la agrego a un elemento inline como SPAN que tenga un color de fondo, no parece tener efecto sobre el texto pero, se "separa" de lo que está arriba y abajo:

In hac habitasse platea dictumst.

Es más fácil de ver si coloco esa propiedad en un bloque como un DIV o P:

<div style="line-height: 50px;">

  <span style="background-color:#456;">In hac habitasse platea dictumst.</span>

</div>

In hac habitasse platea dictumst.

In hac habitasse platea dictumst.

In hac habitasse platea dictumst.

Allí podemos ver que ese rectángulo coloreado y con un borde, al que sólo le vamos cambiando el valor de line-height (20, 50, 100), se va haciendo cada vez más alto y el texto, siempre queda centrado verticalmente.

Eso es exactamente lo que es line-height, la altura de una línea, de cualquier línea y si bien sirve para alinear verticalmente algo, este método sólo es útil cuando cuando eso que queremos mostrar no es demasaido ancho ya que si es excesivo y requiere dos líneas, las cosas se verán mal:

In hac habitasse platea dictumst.
In hac habitasse platea dictumst.

Por defecto, a menos que esté definida globalmente, el valor de line-height es 1; eso, significa que la altura de una línea es exactamente igual al tamaño de la fuente; en este caso, la altura del DIV será exactamente de 50 pixeles ya que 28 + 22 = 50:

font-size:28px
font-size:22px

Usando valores absolutos, la altura se calcula fácilmente, basta multiplicar ese número por el tamaño de la fuente. Si en el ejemplo anterior, line-height tuviera el valor 1.5, la altura total sería de: 28 * 1.5 + 22 * 1.5 = 70 pixeles

font-size:28px
font-size:22px

Suelen usarse otras propiedades; px para pixeles es fácil de entender en cambio, em no es tan simple ya que es un valor empleado en tipografía (más información) y es bastante arbitrario; en los dos ejemplos anteriores, la altura final del contenedor será de 37 o 51pixeles pero, esos valores variarán si la fuente es otra; por el contrario, si los valores son expresados como absolutos o en pixeles, el tipo de fuente no tendrá influencia y la altura será siempre la misma.

Como dije, line-height define la altura de una línea pero eso no significa que sólo se aplique a los textos. También es una forma de alinear imágenes verticalmente:

<div style="line-height: 300px;">

  <img style="vertical-align:middle" src="URL_imagen"/>

</div>

Ese DIV tendrá 300 pixeles de alto y una imagen centrada, sin importar el tamaño de esa imagen salvo que, clar, supere los 300 pixeles de alto en cuyo caso, se mostrará completa y el valor de line-height será ignorado:

altura imagen = 80 | altura imagen = 160 | altura imagen = 240