关于line-height相关知识(以及字号,基线,行内框)

line-height解释:

1. 行高line-height是指相邻两行文本基线(baseline)之间的距离,基线的概念来自于英文字符,就是字母”x”的下边缘(线),放个图,方便大家理解;
   
   涉及到中文和英文同时排列,就可以依据”x”下边缘确认基线的位置.
   这里介绍一下”x-height”,”x-height”是指小写字母x的高度,描述的是基线和等分线mean line间的距离。
   老规矩,上图;
   
   CSS里有一个常用于图文的对齐 :vertical-align: middle;middle指的就是是基线往上1/2 “x-height”的高度。理解了这一点,有助于理解对齐.
2. 字号font-size,行高line-height和行框
   字号和行高通常设置为偶数(px单位);行高减去字号的部分(CSS中称为行间距)分为两部分,分别加到文本内容的顶部和底部. 这两部分无法平均分配的时候,
   比如font-size=15px; line-height=30px; chrome浏览器将顶部加8px,底部加7px; 另外由于中文字体并不是顶天立地的(不是完全占据字号的高度),一般中文字体的高度是从上边缘往下计算,下面这个例子就可以很明白的看出来.