Question

所以我有一个跨越内部的div。我设置显示：阻止或显示：div上的flex，以及跨度上的小字体大小。令人惊讶的是，这给了div不同的高度。参见示例。

如果我在body或div上设置较小的font-size，则两者的高度相等。但是，如果我在示例中设置较小的字体大小，则div会达到不同的高度。怎么会？我能为此做点什么吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

在块格式化上下文中，span是内联级元素，line-height适用。

在代码示例中，1rem下面的span上的任何字体大小都会更改font-size，但不会更改line-height，这仍然是固定的。这就是你在font-size: .8rem看到的。 div的高度不会改变。除非字体大小超过1rem，否则它不会改变。

在flex formatting context中，span是一个弹性项目。 flex项始终是块级元素（无论元素类型如何）。根据{{3}}，Flex项目被“封锁”。由于没有内联级元素，line-height不适用。

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

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

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