Warum Display: Block und Display: Flex Render das gleiche Element mit einer anderen Höhe?

Question

Also habe ich ein Div mit einer Spannweite im Inneren. Und ich setze display: block oder display: flex auf die div, und eine kleine schriftgröße auf der span. Überraschenderweise gibt dies dem Div verschiedene Höhen. Siehe das Beispiel.

Wenn ich die kleinere Schriftgröße auf dem Körper oder Div festlegen, dann ist die Höhe von beiden gleich. Wenn ich aber die kleinere Schriftgröße wie im Beispiel auf die Spanne einstelle, erhalten die divs unterschiedliche Höhen. Woher? Und kann ich etwas dagegen tun?

span { 
 
    font-size: 0.8rem; 
 
} 
 

 
div { 
 
    border: 1px solid; 
 
}

<div style="display: block;"> 
 
    <span>test text 1</span> 
 
</div> 
 

 
<div style="display: flex;"> 
 
    <span>test text 2</span> 
 
</div>

Answer 1

In einem block formatting context, die line-height Eigenschaft macht einen Unterschied.

Dies liegt daran, line-height legt die minimale Höhe für Inline-Level-Elemente und Line-Boxen in Container auf Blockebene fest.

In einem Blockformatierungskontext ist ein span ein Inline-Level-Element und line-height gilt.

In dem Codebeispiel wird jede Schriftgröße auf span unter 1rem die font-size ändern, aber nicht die line-height, die fest bleibt. Das sehen Sie mit font-size: .8rem. Die Höhe des div ändert sich nicht. Und es wird sich nicht ändern, wenn die Schriftgröße 1rem nicht überschreitet.

In einem flex formatting context ist das span ein flexibles Element. Ein Flex-Element ist immer ein Block-Level-Element (unabhängig vom Elementtyp). Flex-Elemente werden gemäß der flexbox spec "blockiert". Da keine Inline-Level-Elemente vorhanden sind, gilt line-height nicht.

Auch eine anfängliche Einstellung eines Flex-Containers ist align-items: stretch. Das bedeutet, dass span die Höhe des Containers festlegt.

Zusammenfassend, mit display: block die line-height hält die div Höhe fest. Mit display: flex gibt es keine line-height Interferenz und das Div verfolgt die Höhe der Spanne frei.

Eine Lösung: Fügen Sie display: block zu der span hinzu, die das line-height Problem beseitigt.