父元素line-height如何影响子元素字体大小不同的容器高度？

CSS盒子高度：父元素line-height对不同字体大小子元素高度的影响

本文分析一个CSS布局中的常见问题：当父元素包含字体大小不同的子元素时，父元素的高度是如何计算的。

问题描述： 一个名为content的div元素包含一个名为text的span元素。content的字体大小为60px，text的字体大小为20px。实际显示中，content的高度并非60px，而是更高。 这其中的原因是什么？

示例代码：

  123

.content {
    font-size: 60px;
}

.text {
    font-size: 20px;
}

问题关键：父元素的line-height属性。 当父元素content没有显式设置line-height时，浏览器会根据其内容（子元素）的字体大小来推断line-height。在本例中，由于content没有设置line-height，浏览器会使用其子元素text的font-size (20px) 作为content的line-height。 因此，content的高度并非由其自身的font-size (60px) 决定，而是由继承的line-height (20px) 决定，这解释了为什么content的高度高于预期的60px。 实际上，content的高度由其行高（20px）和文本内容撑开。

因此，父元素的高度受其子元素字体大小和line-height的共同影响。 如果需要精确控制父元素高度，建议显式设置line-height属性。