5.3.2 vertical-align作用的前提
vertical-align 起作用是有前提条件的，只能应用于内联元素以及 display 值为 table-cell 的元素。
vertical-align 属性只能作用在 display 计算值为 inline、inline-block，inline-table 或 table-cell 的元素上。
浮动和绝对定位会让元素块状化
vertical-align:middle
display:table-cell 可以无视行高:对 table-cell 元素而言，vertical-align 起作用的是 table-cell元素自身。
table-cell 元素设置 vertical-align 垂直对齐的是子元素，但是其作用的并不是子元素，而是 table-cell 元素自身。就算 table-cell 元素的子元素是一个块级元素，也一样可以让其有各种垂直对齐表现。
5.3.3 vertical-align 和 line-height 之间的关系
vertical-align 的百分比值是相对于 line-height 计算的
（1）图片块状化。可以一口气干掉“幽灵空白节点”、line-height 和 verticalalign。
（2）容器 line-height 足够小。只要半行间距小到字母 x 的下边缘位置或者再往上，自然就没有了撑开底部间隙高度空间了。比方说，容器设置 line-height:0。（3）容器 font-size 足够小。此方法要想生效，需要容器的 line-height 属性值和当前 font-size 相关，如 line-height:1.5 或者 line-height:150%之类；否则只会让下面的间隙变得更大，因为基线位置因字符 x 变小而往上升了。（4）图片设置其他 vertical-align 属性值。间隙的产生原因之一就是基线对齐，所以我们设置 vertical-align 的值为 top、middle、bottom 中的任意一个都是可以的5.3.4 深入理解 vertical-align 线性类属性值
inline-block 与 baseline:vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是 inline-block 元素，则规则要复杂了：一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。
为什么何<i>元素上面还有一点间隙：因为字符实际占据的高度是由 line-height 决定的，当 line-height 变成 0 的时候，字符占据的高度也是 0，此时，高度的起始位置就变成了字符内容区域的垂直中心位置，于是文字就有一半落在框的外面了。
基于 20px 图标对齐的处理技巧：
（1）图标高度和当前行高都是 20px。很多小图标背景合并工具都是图标宽高多大生成的CSS 宽高就是多大，这其实并不利于形成可以整站通用的 CSS 策略，我的建议是图标原图先扩展成统一规格，比方说这里的 20px×20px，然后再进行合并，可以节约大量 CSS 以及对每个图标对齐进行不同处理的开发成本。（2）图标标签里面永远有字符。这个可以借助:before 或:after 伪元素生成一个空格字符轻松搞定。（3）图标 CSS 不使用 overflow:hidden 保证基线为里面字符的基线，但是要让里面潜在的字符不可见。
vertial-align:top/bottom ：vertial-align:top 和 vertial-align:bottom
vertial-align:top 就是垂直上边缘对齐，具体定义如下。内联元素：元素底部和当前行框盒子的顶部对齐。table-cell 元素：元素底 padding 边缘和表格行的顶部对齐。
vertial-align:middle 与近似垂直居中
• 内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。• table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。