5.3.2 vertical-align 作用的前提
vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及 display 值为 table-cell 的元素。vertical-align 属性只能作用在 display 计算值为 inline、inline- block，inline-table 或 table-cell 的元素上。
5.3.3 vertical-align 和 line-height 之间的关系
对字符而言， font-size越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当字号大小不一样的两个文字在一起的时候，就会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致出现意料之外的高度。
5.3.4 深入理解 vertical-align 线性类属性值
1．inline-block 与 baseline
vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下边缘，对于替换元素则是替换元素的下边缘。
一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是margin底边缘；
否则其基线就是元素里面最后一行内联元素的基线。
2．了解 vertial-align:top/bottom
vertial-align:top 就是垂直上边缘对齐，定义如下：
内联元素：元素底部和当前行框盒子的顶部对齐。
table-cell 元素：元素底 padding 边缘和表格行的顶部对齐。
3．vertial-align:middle 与近似垂直居中
line-height 和 vertial-align: middle 实现的多行文本或者图片的垂直居中全部都是“近似垂直居中”。
vertial- align:middle ：
内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。
table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。