【CSS】line-height的点滴
本文参考资料来自：
豆豆猫的窝::无尽网络里的神秘地带::V6.0
其中的几篇文章：
7.3 行高：line-height属性[2]——行高的计算与继承
本文对上面几篇文章做个人的总结，会比较简略，慎入
1. 行高是文字基线之间的距离
2. 目前已知的几种框：
行内框、行框、盒子模型
3. line-height可以应用在任何元素上
4. 行内框的高度等于行高，如果没有设置，默认等于内容区域的高度
行框的高度等于一行中最高的行内框的高度，如果有图片且图片的高度超过了最高的行内框高度，则图片会撑高行框的高度
7.3 行高：line-height属性[2]——行高的计算与继承
1. 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。
2. 行高可设置的比字体高度小。
3. line-height是可以继承的，如em，但继承的是计算值。不过，在不同的浏览器中，会有显示的差别，见图7-25
单独的实数值是直接继承的，不是计算值，如 line-height：1。
4. 当内容中含有图片的时候，如果图片的高度大于行高，则含有图片行的行框将被撑开到图片的高度。
图片虽然撑开了行框，但是不会影响行高，因此也不会影响到基于行高来计算的其他属性。
当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐。
IE 6.0对于含有图片或者表单元等可替换行内元素的行高失效
IE 7.0中已经修正了这个错误，但是其表现同其它浏览器也不相同。IE 7.0中，将半行距分别加在了图片的上下，而由于图片默认是基线对齐，因此文字的基线下移了，这显然不符合CSS中的规定。
其他
1. 如果一行中全部为文字，那么行框高度等于行内框高度最大的那个
2. 如果既有文字，又有图片，那么行框高度会被图片撑开
3. vertical-align：super的文字会撑开行框高度。
4. 图片使用vertical-align：top，且文字没有设置行高，那么文字会主动和图片顶部对齐，如果设置行高了，那么图片会和行框高度对齐。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
