¿Cómo encuentro espacio entre líneas en HTML?

Esta es una pregunta de seguimiento a una pregunta anterior mía . Estoy tratando de encontrar una manera de encontrar la location exacta de cada línea de text en un elemento.

Pude encontrar el atributo css lineHeight (ver respuesta anterior). El problema es que la altura de mi elemento es ligeramente mayor que la altura acumulada del número de líneas multiplicado por la lineHeight .

Un ejemplo:

Tengo un <p> que es 2010px alto sin relleno, borde o margen ( scrollHeight , offsetHeight y clientHeight reportan lo mismo) y tiene 89 líneas en el browser. La línea lineHeight of the computedStyle() es 22.

2010/22 = 91.37 líneas

Con elementos pequeños, puedo limitar el valor para get el número correcto de líneas, pero me meto en el problema anterior con elementos más grandes donde no puedo get con precisión el número exacto de líneas.

Mi suposition es que hay un pequeño espacio entre estas líneas de text que no estoy teniendo en count. Alguna idea de como encontrarlo? ¿Tiene que ver con los types de letra? ¿Lo establece automáticamente el browser? Cualquier documentation sería especialmente útil.

¡¡Gracias!!

Actualizar:

Así que tengo 26 superíndices en mi <p> , cada uno de los cuales sobresale 2px, extendiendo la lineHeight de esas líneas en las que aparecen a 24px, lo que da count de mi espacio faltante. (¡Woot! ¡Gracias hasta ahora!)

Supongo que el bote en el que estoy ahora es que necesito encontrar una forma de calcular dinámicamente cuánto sobresalen por encima de la línea superior normal, o descubrir cuánto más alta es la línea de base de un <sup> encima de la línea base normal. (Viceversa por un <sub> .) De lo contrario, ¿podría determinarlo con CSS?

Los superíndices y subíndices normalmente sobresalen por encima y por debajo de los límites de la línea, como se ilustra en esta demostración ; verá que el ejemplo de la izquierda tiene más espacio aparente entre las líneas que el derecho, aunque tengan la misma line-height . Desafortunadamente, la "tipografía" del browser (si puede llamarlo así) no le permite determinar cuánto sobresalen los sub / superguiones, por lo que no puede tener eso en count cuando calcula las alturas de línea reales.

Proporcionar mi propia respuesta, ya que @ lanzz's está incompleta en cierta medida.

Si define el elemento de bloque como:

 div { font-size: 10px; line-height: 10px; height:30px; margin-top: 0px; margin-bottom: 0px; border: 0px; overflow-y: hidden; padding: 0px; } 

obtendrá suficiente espacio para EXACTAMENTE 3 líneas. Sin embargo, si tiene sub-scripts o super-scripts, less líneas son visibles. Al eliminar el desbordamiento, puede forzarlo a que solo muestre 3 líneas de espacio.

Esto es demostrable en: http://jsbin.com/ogoruy/4/

El superíndice y el subíndice son 'elementos de bloque en línea':

La altura de la casilla en línea encierra todos los glifos y su mitad de guiado en cada lado y, por lo tanto, es exactamente 'altura de línea'.

Cuando solo hay un valor de 'altura de línea' para todos los cuadros en línea en un cuadro contenedor de bloques y todos están en la misma fuente (y no hay elementos reemplazados, elementos en bloque en línea, etc.), lo anterior garantizará que las líneas de base de líneas sucesivas están separadas exactamente por "línea de altura".

http://www.w3.org/TR/CSS2/visudet.html#line-height