por qué la altura de la línea del tramo es inútil

Primero, veamos un pedazo de código:

http://jsfiddle.net/rFGkV/

¿Por qué no se usa la altura de línea del tramo? La altura de línea todavía es de 200px, pero cuando establecemos la propiedad de visualización de span inline-block línea, ¿se usa la altura de línea del tramo?

Vea abajo:

http://jsfiddle.net/B7z85/

Los diseños de bloques, como div por defecto, se componen de una stack vertical de cuadros de líneas , que nunca tienen espacio entre ellos y nunca se superponen. Cada cuadro de línea comienza con un puntal que es un cuadro en línea imaginaria a la altura de la altura de línea especificada para el bloque. El cuadro de línea continúa con los cuadros en línea del marcado, de acuerdo con la altura de su línea.

El siguiente diagtwig muestra el diseño de su primer ejemplo. Tenga en cuenta que, dado que 1.7 veces la altura de la fuente es mucho menor que la altura del puntal, la altura de la línea está determinada por la altura del puntal, ya que el recuadro de línea debe contener por completo sus recuadros en línea. Si establecieras que la altura de la línea en el span fuera mayor de 200px, los cuadros de líneas serían más altos, y verías que el texto se alejaba más.

Diseño con span como en línea

Cuando haces el span inline-block, la relación entre el div y el span no cambia, pero el span gana su propia estructura de disposición de bloques con su propia stack de cajas de líneas. Entonces, el texto y los saltos de línea se presentan dentro de esta stack interna. El puntal del bloque interno es 1,7 veces la altura de la fuente, es decir, el mismo que el texto, y el diseño ahora se ve como a continuación, por lo que las líneas de texto se colocan más cerca, lo que refleja la configuración de altura de línea del span .

(Tenga en cuenta que los dos diagtwigs están en diferentes escalas).

Diseño con span como bloque en línea

Esto es por diseño. Hay dos tipos de elementos dentro de un documento HTML: bloque y en línea. Los elementos en línea no interrumpen el flujo del documento, pero los elementos del bloque sí lo hacen.

Los elementos de bloque, como su nombre indica, bloquean un área de la página que contiene algún contenido. Algunos ejemplos de elementos de bloque son:

y

. Puede aplicar altura, altura de línea y otras propiedades de CSS a estos elementos para cambiar el tamaño del bloque y, posteriormente, el flujo del documento.

Los elementos en línea ocupan la cantidad mínima de espacio necesaria para representarlos, lo que significa que establecer anchuras y alturas en estos elementos no tendrá ningún efecto. Como ya ha visto, puede indicarle al navegador que trate un elemento en línea como un elemento de bloque para permitirle aplicar alturas.

Se puede ver un ejemplo de esto cuando se usan elementos

  • para crear menús.

  • s son elementos de bloque. Si crea una lista, los elementos se mostrarán verticalmente en la página, asegurándose de que cada elemento de la lista aparezca debajo del anterior. Sin embargo, si aplica display: inline; a los elementos de la lista, ahora aparecerán en forma horizontal.