极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>image</title>
<style type="text/css">
span {
font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
font-size: 16px;
line-height: 16px;
}
</style>
</head>
<body>
<div>
<span>行内元素</span>
</div>
</body>
</html>
在Chrome里，span的高度从开发者工具看是21px，而我设置的是16px的行高和字体大小。
那么为什么实际高度变成了21px，多出来的5px是什么属性造成的？
外层的div实际高度从开发者工具看是18px，为什么不是21px？
span是21px是字体的原因，font-size会给出一个基本的字体框大小，最后具体的值靠字体本身决定，字体可以小于或超出这个基本框。然后，这里显示的
span高度和自身的line-height完全无关。也许这很奇怪，或者感觉与W3C标准不一致，但开发者工具就是这样处理的。你看到的高度是这个字体的高度，如果你给它加上竖直方向padding和border，这部分高度同样会计入span的高度，而当span进入布局时，这个工具中显示的高度显然是没什么意义的。那么按照标准和实际上的布局，这个
span有多高？就是line-height中的16px，不论字体有多大，竖直方向的borderpadding有多高，都是16px。那么为什么外层
div的高是18px,而不是16px？外面的div看似只有一个span，但请注意，它本身是有font-size和line-height值的，如果你在div以内、span以外写上字，这些字就得按div的font-size和line-height来排，就现在是空的，这个布局依然存在。你所看到的18px，就是目前div的line-height。当然，
div的高度不是简单由自身line-height决定，只是这里正好。