一、line-height的定义和工作原理总结
line-height的属性值:
- normal 默认 设置合理的行间距。
- number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距line-height:1.5;
- length 设置固定的行间距。 例如：line-height:18px;
- % 基于当前字体尺寸的百分比行间距。 例如：line-height:150%;
line-height 的定义：
首先认识下文字的四条线
从上到下四条线分别是顶线、中线、基线、底线.其中vertical-align中属性有top、middle、baseline、bottom与四条线相关。
行高：指一行文字的高度。具体来说是指两行文字间基线之间的距离。
line-height的工作原理：
内联格式模型（inline formatting model）
![]()
这两个的区别在于，前者的行内框都是用span,后者用的是div。（都设置display:inline-block）
说明对于兄弟元素而言，行内元素是中垂线对齐，而块级元素更接近底线对齐。
参考文章：
详细介绍：行高：line-height属性
更深入介绍：深入了解css的行高Line Height属性
注意事项：
浏览器默认会给文字设置line-height。不同浏览器不同设置。
一般会reset.css里重新设置line-height，所以在布局时遇到文字要记得设置的line-height是否符合或重设
2017-01-19