<!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元素设置的宽度和高度并不起作用，如果想要设置高度和宽度需要将它们转换为块级元素或者行内块元素。
添加：display: inline-block;
span是21px是字体的原因，font-size会给出一个基本的字体框大小，最后具体的值靠字体本身决定，字体可以小于或超出这个基本框。
然后，这里显示的span高度和自身的line-height完全无关。也许这很奇怪，或者感觉与W3C标准不一致，但开发者工具就是这样处理的。你看到的高度是这个字体的高度，如果你给它加上竖直方向padding和border，这部分高度同样会计入span的高度，而当span进入布局时，这个工具中显示的高度显然是没什么意义的。
那么按照标准和实际上的布局，这个span有多高？就是line-height中的16px，不论字体有多大，竖直方向的border padding有多高，都是16px。
那么为什么外层div的高是18px,而不是16px？外面的div看似只有一个span，但请注意，它本身是有font-size和line-height值的，如果你在div以内、span以外写上字，这些字就得按div的font-size和line-height来排，就现在是空的，这个布局依然存在。你所看到的18px，就是目前div的line-height。
当然，div的高度不是简单由自身line-height决定，只是这里正好。
这个和字体有关系的，把字体换成 simsun（宋体）试试，是不是变成了16px
因为simsun字体下，内容区域高度等于字体大小，而在其它字体下，内容区域高度和字体、字号有关，和line-height没有任何关系
再次测试很多地方都不对，就不误导人了
<div style="border: 1px solid #000;">
<span style="font-size: 16px; line-height: 1em;">China</span>
</div>
给外边的块加个边框,然后调整font-size或者line-height参数,都可以看到占用的高度在变化.
内非替换元素虽然不具备宽高，但是可以利用line-height来设置高度，但是奇葩的是，虽然行高可以影响行内元素的文档流布局，但是，其边框依旧会包裹其内容，忽略行高带来的上下留白。