css - texto - tamaño de fuente frente a altura de línea frente a altura real

tamaño de letra css w3schools

Question

Entonces, this pregunta dice que el font-size define la altura de un cuadro para que todas las letras (con ascendentes y descendentes) puedan caber.

Pero, ¿por qué tiene un span con un tamaño de font-size 40px y una line-height un tamaño real de 45px? Si entiendo la pregunta vinculada correctamente, entonces "X" debe ser menor que 40px pero la altura total debe ser exactamente 40px. Pensé que tal vez está haciendo un espacio adicional arriba / debajo de los ascendentes / descendientes, pero la imagen muestra que los ascendentes / descendientes ocupan todo el espacio, por lo que no puede haber mucho espacio adicional:

Cuando envuelvo un div (verde) alrededor del span entonces el div tiene una altura de 40px. ¿Por qué el div usa el font-size de font-size de su hijo para su altura pero el niño mismo no ?:

Ahora, cuando establezco la line-height la line-height del span en 15px (menos que el font-size ), la altura del div cambia a 26px. ¿Cómo se calcula este valor? ¿Tiene esto algo que ver con la línea de base ?:

Cuando establezco la line-height tramo en 65px (más que el font-size ), la altura del div es la altura de la altura de line-height . Hubiera esperado que la altura del div fuera algo como (65px - 45px) + 45px .:

Entonces, ¿cómo afectan el font-size y line-height a las alturas reales de los elementos? Leí algunas preguntas que hacían referencia a la especificación pero no pude sacar mucho provecho de ella. ¿Hay reglas fáciles de entender?

Fiddler

Answer 1

Primero, recomiendo leer mi respuesta en Elementos en línea y altura de línea . Para resumir, hay varias alturas relacionadas con las cajas en línea:

• Altura de la caja en línea, dada por line-height
• Altura de la caja de líneas, que en casos simples también está dada por line-height , pero no aquí.
• Altura del área de contenido del cuadro en línea, que depende de la implementación. Esta es el área pintada por el fondo rojo.

La otra altura en su caso es la altura del div padre. Esto se determina por §10.6.3 . En este caso, dado que el cuadro establece un contexto de formato en línea con una línea,

La altura del elemento es la distancia desde su borde de contenido superior hasta el borde [...] inferior del cuadro de la última línea

Así que la altura del bloque padre viene dada por la altura del cuadro de línea.

Lo que sucede aquí es que la altura del cuadro de línea no es la line-height de línea de su cuadro en línea. Y eso es porque la line-height de line-height del bloque principal también se tiene en cuenta :

En un elemento contenedor de bloque cuyo contenido se compone de elementos de inline-level línea, ''line-height'' especifica la altura mínima de los cuadros de línea dentro del elemento.

La altura mínima consiste en una altura mínima sobre la línea de base y una profundidad mínima debajo de ella, exactamente como si cada cuadro de línea comenzara con un cuadro en línea de ancho cero con las propiedades de fuente y altura de línea del elemento.

Llamamos a esa caja imaginaria un "puntal".

Si establece la line-height de line-height del padre en 0 , y la vertical-align del niño en, por ejemplo, la top , entonces la altura del padre será exactamente la line-height de la line-height del niño.

.outer {
  margin-top: 50px;
  background-color: green;
  width: 150px;
  font-family: "Times New Roman";
  line-height: 0;
}
.letter-span-1 {
  background-color: red;
  line-height: 40px;
  font-size: 40px;
  vertical-align: top;
}
.letter-span-2 {
  background-color: red;
  line-height: 15px;
  font-size: 40px;
  vertical-align: top;
}
.letter-span-3 {
  background-color: red;
  line-height: 65px;
  font-size: 40px;
  vertical-align: top;
}

<span class="letter-span-1">XxÀg</span>
<div class="outer">
  <span class="letter-span-1">XxÀg</span>
</div>
The parent block is 40px tall.
<div class="outer">
  <span class="letter-span-2">XxAg</span>
</div>
The parent block is 15px tall.
<div class="outer">
  <span class="letter-span-3">XxÀg</span>
</div>
The parent block is 65px tall.

Si no establece una line-height para el padre, será normal .

Le dice a los agentes de usuario que establezcan el valor usado en un valor "razonable" basado en la fuente del elemento [...]. Recomendamos un valor usado para "normal" entre 1.0 y 1.2 .

Eso significa que habrá una altura mínima para el padre, que será su font-size (que no se especifica y el valor predeterminado depende de la implementación) multiplicado por ese factor (dependiente de la implementación).

También debe considerar la vertical-align del tramo. Por defecto es la baseline de baseline , y eso puede crear una brecha a continuación . La imagen en la respuesta de web-tiki es especialmente útil:

Esto se debe a que vertical-align determina cómo se vertical-align el intervalo con el puntal, y con la baseline la alineación puede depender font-size y terminar aumentando la altura del cuadro de línea. La altura de la caja de línea es la distancia entre la parte superior de la parte superior y la parte inferior de las cajas más bajas de la línea.

Si no quieres que la altura del div padre se incremente por eso, necesitas alguna otra vertical-align , como top , middle o bottom . Entonces, el font-size de font-size del intervalo no debería afectar la altura del div.

Para resumir, la altura de la div depende de

• Su line-height
  • ... que por defecto depende del font-size de font-size de div
• line-height la line-height de Span
  • ... que por defecto depende del font-size de font-size de span
• Posiblemente el font-size de font-size la span, dependiendo de la vertical-align la span
• Y obviamente height , min-height , max-height , etc.

Answer 2

Introducción

Buena pregunta,

Aprendo la mayoría de estas cosas a través de la experiencia personal.

En este caso, la altura DIV se establece en auto. Detectará la altura de sus propios contenidos y evaluará su nueva altura desde allí.

Claramente, el DIV solo toma en cuenta la altura de la línea del. Esto es probable debido a la diversa cantidad de fuentes. La altura de línea nos da la adaptabilidad que necesitamos para varios tipos de fuente.

En breve

tamaño de fuente

El tamaño de fuente solo cambia la fuente real en sí, y no los elementos div a su alrededor.

altura de la línea

Line-height es la altura de la línea real y cambiará los elementos div a su alrededor.

Espera un segundo...

Si tenemos algo como esto:

div {
  background: green;
  margin-top: 50px;
}
.test-one {
  font-size: 20px
}
.test-two {
  font-size: 40px
}

<div>
  <span class="test-one"> test one </span>
</div>

<div>
  <span class="test-two"> test one </span>
</div>

Claramente, el tamaño del DIV (altura: auto;) cambia según el tamaño de la fuente. Esto se debe a que la altura de la línea se ajustará automáticamente en consecuencia si no se establece manualmente.

Una excepción

Tras una inspección adicional, noté que los DIV no siempre coinciden con la altura de la línea. Esto ocurre si la altura de la línea es muy pequeña y la fuente la sobrepasa una cierta distancia.

El ejemplo que diste ...

.outer {
  margin-top: 50px;
  background-color: green;
  width: 150px;
  font-family: "Times New Roman"
}
.letter-span-1 {
  background-color: red;
  line-height: 40px;
  font-size: 40px;
}
.letter-span-2 {
  background-color: red;
  line-height: 15px;
  font-size: 40px;
}
.letter-span-3 {
  background-color: red;
  line-height: 65px;
  font-size: 40px;
}

<span class="letter-span-1">XxÀg</span>

<div class="outer">
  <span class="letter-span-1">XxÀg</span>
</div>

<div class="outer">
  <span class="letter-span-2">XxÀg</span>
</div>

<div class="outer">
  <span class="letter-span-3">XxÀg</span>
</div>

Si miras con atención,

letter-span-1 y letter-span-3 resultan en que el DIV es igual a la altura de la línea.

Sin embargo, letter-span-2 no lo hace.

-------------- Altura de línea - Altura real

letter-span-1: 40px - 40px

letter-span-2: 15px - 25px

letter-span-3: 65px - 65px

Note que la letra span-2 es la más pequeña. Es tan pequeño que en realidad limitará la altura del div. Puedes probar esto alterando el tamaño de la fuente.

¿El porque?"

¿Por qué tienen estas dos configuraciones diferentes, y no solo cambiar la altura normalmente?

Sinceramente, no estoy seguro, pero especulo que fue porque las fuentes no son estándar. Si la computadora lee mal una fuente en particular, puede evaluar incorrectamente la altura de la línea.

Sin mencionar los numerosos "trucos CSS" que puedes hacer con la altura de la línea. Es ideal para agregar espacio para diseños abiertos.

Conclusión

La altura de línea define la altura div, a menos que la altura de línea sea muy pequeña, en cuyo caso el tamaño de fuente definirá el tamaño.