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

Question

3

下面是一个例子。

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上搜索了这个主题，但没有找到能清楚解释计算方式的好文档。

有人对此有想法吗？

- Hanfei Sun

我不了解那个66，但是这个值可能会因为浏览器使用的默认字体和其他我不知道的计算而发生改变。这就是CSS重置所用的地方，使得所有不同浏览器的默认行为表现相同！ - Mattia Nocerino

1

@MattiaNocerino 我添加了重置代码，以在所有浏览器中规范默认字体大小。现在所有浏览器的计算高度应该是一致的... - Hanfei Sun

1

还是有所不同。在Firefox上，我得到了一个68像素大小的div。 - KittMedia

我知道这可能听起来很蠢，但是你尝试过使用像素而不是em来设置字体大小和行高吗？ - Mattia Nocerino

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr Lister · Accepted Answer

使用CSS单位（如em或px）设置行高意味着计算出行高（在本例中，行高变为19.2像素），然后计算出来的值将被继承到span中。因此，span也将具有19（四舍五入）像素的行高，而不是您期望的192像素。

解决方案：不使用CSS单位设置行高。如果您编写line-height:1.2，则行高的继承值将是您想要的值。

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

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

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

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