一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟:)
首先看看“有道词典”的解析!
Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本行基线和下一文本行基线间的距离。 Line Space: 指相邻文本行间上一个文本行下行线(ascent)和下一文本行上行线(descent)间的距离。
Still for each glyph, determine the leading L to add, where L = 'line-height' - AD
AD是指字形ascent和descent间的距离，即是font-size。
这里为更清晰地叙说，我将以广义Leading指代行间距，而狭义Leading则指代行距。
从W3C Rec中看出，line-height就是狭义Leading，而line-height的字面意思即为“行高”，推导结果CSS中行高即是行距。
这里我们了解到行高，行距和行间距的区别了。那接下来要介绍line-height的一个重要特性——垂直居中性。
通过<code>L = 'line-height' - AD</code>我们知道line-height=行间距+字形大小，字形大小我们可以通过font-size来设置，而line-height就更不用说了，而家问题是行间距所占的空间是怎样分配的呢？
方案1:不是说行间距就是上一行的descent到下一行的ascent间的距离吗？那直接分配到A位置就好了。
方案2:如果方案1的分配方案合理，那么分配到B位置就也是OK的。
方案3:一边倒的分配方案太不美观了吧！不如将行间距对半开，然后分别分配到上下两端不就OK了吗！
CSS采用的就是方案3。这是引用了Half-leading的概念，Half-leading = Leading/2.
在深入垂直居中性之前，我们先看一个容易引起误解的示例。(其实是我自己误解而已:()
不是说好了会垂直居中吗？你看字母x明明就在<code>div#container</code>中线的下方呢！
我们用空格符代替文字就可以看清楚了。
“垂直居中”是指字形所在的盒子的垂直中线与line-height所占据的盒子的垂直中线重合，不是指字形的mean line和line-height所占据的盒子的垂直中线重合。
从<code>L = "line-height" - AD</code>可以知道行间距可能会负数，那么垂直居中性还有效吗？
答案是肯定的，L为负数时，Half-leading自然也是负数，只是上下两端从增加空间变为减少等量空间而已。不信你看
'line-height' Value: normal | <number> | <length> | <percentage> | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: refer to the font size of the element itself Media: visual Computed value: for and the absolute value; otherwise as specified
normal Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
normal其实就是一个值，不过实际值则由浏览器决定，实际值一般在1.0~1.2之间（含两端）浮动。但实际真的是这样吗？
Chrome43的结果
Firefox44.0.2
IE9
通过小数据统计得出normal值的规律：
不同浏览器的normal值不相同;
同一个浏览器下，font-size值不同，normal值也会有变化;
同一浏览器下，font-size值相同，font-family值不同，normal值也会有变化;
normal的平均值确实是在1.0~1.2之间（含两端），但具体到特定浏览器、font-family和font-size时，normal的实际值可能会大于1.2。
<length> The specified length is used in the calculation of the line box height. Negative values are illegal.
设置固定值，单位可以是px、pt。好处是简单——设置是什么，line-height的实际高度就是什么。坏处是子元素默认情况下会继承父容器的line-height属性，若子元素的font-size大于父容器的font-size属性值，那么子元素的文本行会十分密集，降低可阅读性。所以我们一般采用相对font-size实际大小来设置line-height值的方式，如默认normal方式。
<percentage> The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
既然采用副作用那么大，那采用这个相对值就万事大吉了吧！非也，首先我们要弄清楚这个的参考系是啥，另外还要明白子元素的line-height到底继承的了哪个值，是值还是父容器实际的line-height值。
的参考系的确是font-size；
子元素继承的是父容器实际的line-height值。也就是说父容器设置为<code>font-size:20px;line-height:200%;</code>，那么子元素继承来的line-height值为40px，而不是200%。因此又回到方式的问题上了。
<number> The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
和方式一样，以font-size作为参考系，以相对值的方式设置line-height。唯一的不同就是子元素继承的是父容器的值，参考系自动变更为子元素的font-size。
其实<code>line-height:1.2em;</code>和<code>line-height:1.2;</code>是等价的。若想将参考系改为根元素的font-size，则需要采用CSS3新增的<code>line-height:1.2rem</code>单位了。
根据WCAG2.0(万维网内容可存取性指南)规定“段落中的行距至少要1.5倍”，那么是否在body那设置一个就一劳永逸呢？请看
看对于h1标题栏而言，行距太多了。于是得出如下配置：
下面我们稍微将line-height垂直居中特性中Leading为负数的示例代码修改一下,将<code>font-size:90px;line-height:10px;</code>迁移到子元素中.
不是说垂直居中吗？这里就涉及到一个相对复杂的CSS垂直对齐规则——vertical-align。
'vertical-align' Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit Initial: baseline Applies to: inline-level and 'table-cell' elements Inherited: no Percentages: refer to the 'line-height' of the element itself Computed value: for and the absolute length, otherwise as specified
<lenght>:设置相对于baseline的距离，正数表示位于baseline的上方，负数表示位于baseline的下方;
< percentage>:设置以line-height为参考系，相对于baseline的距离，正数表示位于baseline的上方，负数表示位于baseline的下方;
baseline:默认值。元素的基线与父元素的基线对齐；
top:把元素line box上边框对齐父元素的line box上边框；
text-top:把元素line box上边框对齐父元素的ascent(即content top edge)；
super:升高元素的基线到父元素合适的上标位置；
middle:把元素line box中垂点与父元素基线 + x-height/2的高度对齐;
sub:降低元素的基线到父元素合适的下标位置；
text-bottom:把元素line box下边框对齐父元素的descent(即content bottom edge)；
bottom:把元素line box下边框对齐父元素的line box下边框；
inherit:继承父元素的对齐方式。
怎么这么多规则要记啊？我记性不好难道到时还要挨个查吗？其实归纳一下就OK了！
对齐操作必定涉及操作元素和参考系元素，而vertical-align的值全是指参考系元素的位置，而操作元素则以baseline或linebox上中下作对齐；
默认对齐方式为baseline，数量值均是相对于baseline而言。
注意：vertical-align仅对inline-level和table-cell元素有效，下面示例无效是正常不过的。
1.默认对齐方式——baseline
这里x for reference frame作为参考系，而它的baseline就是<code>span#obj</code>所要对齐的baseline了。
那么在baseline的基础上的设置<length>和<percentage>
2.top——把元素line box上边框对齐父元素的line box上边框
我们将上面的示例稍微改一下
确实不同了，但这无法证明是元素的line box上边框对齐父元素的line box上边框哦。那么我们改改代码看看
通过<code>line-height:1</code>使line box与content box/area的高度一致，虽然<code>span#parent</code>和<code>span#obj</code>的上边框对齐，但还不能说明什么。
没有任何变化。那改变line-height又如何呢？
为了让<code>span#obj</code>的Half-leading清晰可见，特意添加一个<code>display:inline-block</code>的inline box包裹着<code>span#obj</code>。而<code>span#parent</code>也增大了Half-leading的高度。现在可以我们清晰看到确实是<code>span#obj</code>的line box的上边框对齐父元素的line box上边框。（同理证明了<code>vertical-align:bottom</code>是把元素line box下边框对齐父元素的line box下边框；）
注意：chrome下若外层div不添加<code>font-size:14px;line-height:1;</code>属性，将导致<code>span#parent上有条空白间隙</code>
原因十分简单，那是因为<code>span#parent</code>的对齐方式是baseline，参考系是div的baseline，而div的line-height为normal，有空白间隙就是当然的事了。通过JS就可以看清楚了。
其实除了在div上设置<code>line-height:1</code>之外，我们还可以在<code>span#parent</code>上设置<code>vertical-align:top</code>来解决。
3.text-top——把元素的line box上边框对齐父元素的ascent(即content top edge)
4.middle——把元素line box中垂点与父元素基线 + x-height/2的高度对齐
注意
当元素的<code>display:inline-block/inline-table</code>等对应的是atomic inline-level box时，其line box高度为margin box的高度。若元素对应的是inline box，则其最小高度为line-height，最大则由子盒子决定。
简单来说IE5.5~IE8下<code>vertical-align:text-top</code>是把元素的ascent对齐父元素的ascent(即content top edge)
到这里理论部分已经介绍完了，是时候通过示例来验证自己了！
<a href="http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html">深入了解css的行高Line Height属性</a>
<a href="http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/">我对CSS vertical-align的一些理解与认识（一）</a>
<a href="http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/">CSS vertical-align的深入理解(二)之text-top篇</a>
<a href="http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/">CSS深入理解vertical-align和line-height的基友关系</a>
<a href="http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/">css行高line-height的一些深入理解及应用</a>
<a href="http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/">大小不固定的图片、多行文字的水平垂直居中</a>
<a href="http://sojuker.blog.163.com/blog/static/1387908792012760243916/">深入理解 CSS 中的行高与基线</a>
如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！
<a href="http://home.cnblogs.com/u/fsjohnhuang/">^_^肥仔John</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followees">关注 - 85</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followers">粉丝 - 707</a>
<a>+加关注</a>
4
<a></a>
评论列表
支持支持。。好长。。
http://pic.cnblogs.com/face/u41249.jpg
<a href="http://www.ucancode.com/index.htm" target="_blank">【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018！</a>
<a href="https://cloud.tencent.com/developer/support-plan?fromSource=gwzcw.710852.710852.710852" target="_blank">【推荐】加入腾讯云自媒体扶持计划，免费领取域名&服务器</a>
<b>最新IT新闻</b>:
<b>最新知识库文章</b>:
<a href="https://github.com/fsjohnhuang" target="_blank">肥仔John@github</a>
作品：
<a href="https://github.com/fsjohnhuang/iScheme" target="_blank">iScheme—Scheme解释器</a>