前言
如下所示:
白色是塌陷的部分(即 a1 和 c1)，红色是line-height，如果把容器设置为 overflow:hidden,
那么就只能看见红色的部分。
如果容器被指定height高度时，
height > line-height，那么黄线会下移，红色部分会展示更多，
height
所以在这里的情况是，
决定容器高度的优先级 height > line-height > font-size
vertical-align
垂直对齐线，默认为baselien，来自W3C的定义：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位
vertical有几个特定的值，或者指定一个值。
English中文 中文English
给第一个span，设置60px的垂直偏移量，显示如下：
其中，黄色线就是基线（baseline），绿线和黄线的间隔即为60px。
这里会发现，容器（蓝色）的高度被撑高了。
容器的高度 height = line-height + vertical-align
当然同理,如果容器的高度被指定了，那么高度则不变，而超出的部分则不影响布局。如果设置overflow:hidden，超过的部分则不可见。
而vertical-align的其它特殊值，均可以看做一个根据容器高度而变化的相对值。
结论
熟练使用inline-level element和行内布局的属性，以非常快速完成垂直居中和水平居中的效果，并且有良好的可维护性和拓展性。
参考
W3C IFC
W3C line-height和vertical-aligin
line-height详解
查看更多关于CSS行内布局实践小结_html/css_WEB-ITnose的详细内容...