Why display: block and display: flex render the same element with different heights?

Question

So I have a div with a span inside. And I set display: block or display: flex to div and small font size on span. Surprisingly, this gives different heights on the div. See an example.

If I set a smaller font size on the body or div, the height of both is equal. But if I set a smaller font size on the span, as in the example, then the divs will have different heights. How so? And can I do something about this?

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>

Run codeHide result

Answer 1

In the context of block formatting, a property line-heightmatters.

, line-height .

a span line-height.

span 1rem font-size, line-height, . , font-size: .8rem. div . , 1rem.

flex, span . flex ( ). Flex "", flexbox spec. , line-height .

, flex - align-items: stretch. , span .

, display: block line-height div. display: flex line-height, div .

: display: block span, line-height.