在CSS中，如何为块元素计算“高度”？

Question

以下是一个例子

div > span {
  font-size: 10em;
}
div {
  line-height: 1.2em;
}

/* Normalize the default font size */
body {
  font-size: 16px; 
}

<div>
  <span>Cat</span>
</div>

当我在Chrome或Safari中检查div元素的高度时，其height的计算值为66px。

然而，66px对我来说看起来很神奇，因为我不知道如何计算这个值。我在Google上搜索了这个主题，但没有找到一个可以清楚解释计算的好文档。

有没有人有这方面的想法？

Answer 1

使用CSS单位（em或px等）设置行高意味着计算行高（在这种情况下，行高为19.2px），然后计算值将继承到跨度。因此，跨度的行高为19（圆形），而不是您期望的192个像素。

解决方案：设置没有CSS单位的行高。如果你写line-height:1.2，行高的继承值将是你想要的。

＆＃13;

＆＃13;

div > span {
  font-size: 10em;
}
div {
  line-height: 1.2;
}

/* Normalize the default font size */
body {
  font-size: 16px; 
}

＆＃13;

<div>
  <span>Cat</span>
</div>

＆＃13;

＆＃13;

＆＃13;

至于解释为什么div本身不会变成相同的高度（19px），这是因为大文本的下降，占据了基线以下的空间。在你的情况下，这显然是52px（对于不同的字体可能会有所不同）导致div增长。