css - sub - ¿Por qué la altura de la línea de la espada es inútil?

que hace la etiqueta sub en html

Question

Primero, veamos un trozo de código:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }

<div><span>123<br>456<br>789<br>000</span></div>

¿Por qué no se utiliza la line-height del span ?

La line-height sigue siendo de 200px , pero cuando configuramos la propiedad de display span inline-block line-height se utiliza la line-height de la line-height del span ?

Vea abajo:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }

<div><span>123<br>456<br>789<br>000</span>

Answer 1

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 de bloque sí lo hacen.

Los elementos de bloque, como su nombre indica, bloquean un área en la página que contiene algo de contenido. Algunos ejemplos de elementos de bloque son: <p> y <div> . 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 requerido para renderizarlos, lo que significa que establecer anchos y alturas en estos elementos no tendrá ningún efecto. Como ya ha visto, puede decirle 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 los elementos <li> para crear menús. <li> 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 horizontalmente.

Answer 2

Los diseños de bloques, como div está por defecto, están formados por una pila vertical de cajas de líneas , que nunca tienen espacio entre ellas y nunca se superponen. Cada cuadro de línea comienza con un puntal que es un cuadro en línea imaginario, la altura de la altura de línea especificada para el bloque. El cuadro de línea luego continúa con los cuadros en línea del marcado, de acuerdo con sus alturas de línea.

El siguiente diagrama 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 cuadro de línea debe contener totalmente sus cuadros en línea. Si hubiera establecido que la altura de la línea en el span fuera mayor que 200 px, los cuadros de línea serían más altos y vería que el texto se separaba aún más.

Cuando se crea el span en bloque, la relación entre el div y el span no cambia, pero el intervalo gana su propia estructura de diseño de bloque con su propia pila de cajas de líneas. Así que el texto y los saltos de línea están dispuestos dentro de esta pila 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 abajo, por lo que las líneas de texto se colocan más juntas, lo que refleja la configuración de altura de línea del span .

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