极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
}
header{
height: 90px;
}
div{
height: 500px;
line-height: 500px;
background-color:red;
}
span{
background-color:grey; opacity: 0.7;
font-size: 120px;
}
</style>
</head>
<body>
<header></header>
<div>
<span>你好World</span>
</div>
</body>
</html>
div盒子行高和高度一样，但是字体被鼠标选中后超出红色盒子的那一点点蓝色区域（最下面那一块蓝色的）是什么东西呢？
解决方式：保持父子元素font-size一致，将font-size放到div里, span里面的font-size可以去掉。
原因：
多出那一块不是因为子元素撑高了，而是因为父元素的0宽度的“虚拟字符”下沉了，将整行拉低了。为什么下沉？因为子元素的字号变大了，在行高确定的情况下(500px)，根据行高的设定规则，字体顶部和底部的距离一致，以便使字体能处于行的中间显示，这样一来使得字体基线（baseline）下移了；同一行里父元素的字的基线要和它的基线对齐，因此被拉下来了。
你可以做个实验，在父元素div里写几个字，然后父元素的字和子元素的字一起选中，然后你拿尺子量一量，看看是不是父元素的字体顶部要比底部多一小截，而子元素的底部要比顶部多一截。
这样讲可能不是很清楚，可以参考这篇文章：
深入理解line-height