浏览器是怎么计算行内元素高度的？

Question

span{
font-family:"MicrosoftYaHei","HiraginoSansGB","WenQuanYiMicroHei",sans-serif;
font-size:16px;
line-height:16px;
}
行内元素
在Chrome里，span的高度从开发者工具看是21px，而我设置的是16px的行高和字体大小。
那么为什么实际高度变成了21px，多出来的5px是什么属性造成的？
外层的div实际高度从开发者工具看是18px，为什么不是21px？

Answer 1

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决定，只是这里正好。

Answer 2

China给外边的块加个边框,然后调整font-size或者line-height参数,都可以看到占用的高度在变化.