html - 为什么显示: block and display: flex render the same element with a different height?

Question

所以我有一个内部有 span 的 div。我在 div 上设置 display:block 或 display:flex，在 span 上设置小字体。令人惊讶的是，这在 div 上给出了不同的高度。请参阅示例。

如果我在 body 或 div 上设置较小的字体大小，则两者的高度相等。但是，如果我像示例中那样在 span 上设置较小的字体大小，则 div 会获得不同的高度。怎么来的？我能做些什么吗？

span {
  font-size: 0.8rem;
  border: 1px red solid;
}

div {
  border: 1px blue solid;
}

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

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

Answer 1

在 block formatting context 中, line-height 属性有所不同。

这是因为 line-height 为行内元素和 block 级容器内的行盒建立了最小高度。

在 block 格式化上下文中，span 是行内级元素并且 line-height 适用。

在代码示例中，span 上低于 1rem 的任何字体大小都会更改 font-size，但不会更改 line-height ，保持不变。这就是您在 font-size: .8rem 中看到的内容。 div 的高度不变。除非字体大小超过 1rem，否则它不会改变。

在 flex formatting context 中, span 是一个 flex 元素。 flex 元素始终是 block 级元素(无论元素类型如何)。根据 flexbox spec，Flex 元素被“ block 化” .因为没有内联级元素，所以 line-height 不适用。

此外， flex 容器的初始设置是 align-items: stretch。这意味着 span 设置容器的高度。

总结，使用display: block line-height 保持div 高度固定。使用 display: flex，没有 line-height 干扰，div 可以自由跟踪 span 的高度。

一种解决方案:将display: block添加到span，从而消除了line-height问题。