1、line-height

行高，字面理解即可，就是行周期，如上图，行高决定了上下两块对应的各线的对应距离，同样，由于这是个周期概念，行高也是一行所占高度的概念，但是，不能期望行高为零，这一行的高度就为零，因为顶线之上，底线之下的边距可以取负值。顶底之间的距离取决于font-size和行内元素（包括inline-block）最大值max，当行高小于max时，会被内部元素硬生生的撑开，顶中基底各个线会依这个max元素来排布，而上下两条绿线之间的距离则取决于line-height，line-height小于font-size时，绿线收缩到红线之内。

2、vertical-align（这个属性要放在子元素上）

默认情况是，子元素的基线与父元素的基线对齐，但父元素会留有诡异的空白节点，空白节点的字号不是零，当父元素的高度小于空白节点的字号时，父元素的基线就会露到父元素之外，这时，子元素（inline、inline-block）会与父元素基线对齐，也就是顶部不对齐，可以用vertical-align来设置top对齐。但由于line-height可以小于font-size，所以对齐方式中，bottom不一定比text-bottom要低，top不一定比text-bottom要高。

仅考虑line-height大于font-size和子元素的情况，容易理解，行高指定了图中绿线也就是每一行的高度，因为vertical-align是针对这几种线来定位的，所以block元素要转换为inline-block才能生效，这样，设定了line-height、font-size，布局结构中的各条线就出来了，然而注意中线并不在line-height周期的绝对中心处，当设置font-size=0时，顶中基底会全部坍缩到绝对中心处

演示地址在：line-height的演示页