5.3.2 vertical-align 作用的前提：只能应用于内联元素以及 display 值为 table-cell 的元素。vertical-align 属性只能作用在 display 计算值为 inline、inlineblock，inline-table 或 table-cell 的元素上。
5.3.3 vertical-align 和 line-height 之间的关系：vertical-align 和 line-height 之间的关系很明确，即“朋友”关系。最明显的就是 vertical-align 的百分比值是相对于 line-height 计算的，实际是只要出现内联元素，这对好朋友一定会同时出现。当前 line-height 计算值是 20px，而 font-size 只有 14px，因此，字母 x 往下一定有至少 3px 的半行间距（具体大小与字体有关），而图片作为替换元素其基线是自身的下边缘。根据定义，默认和基线（也就是这里字母 x 的下边缘）对齐，字母 x 往下的行高产生的多余的间隙就嫁祸到图片下面，让人以为是图片产生的间隙，实际上，是“幽灵空白节点”、line-height 和 vertical-align 属性共同作用的结果。
5.3.4 深入理解 vertical-align 线性类属性值。
1．inline-block 与 baseline：vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是 inline-block 元素，则规则要复杂了：一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。
2．了解 vertial-align:top/bottom：vertial-align:top 就是垂直上边缘对齐。用更通俗的话解释就是：如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果 display 计算值是 table-cell 的元素。
3．vertial-align:middle 与近似垂直居中。内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。 table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。
5.3.3 vertical-align 和 line-height 之间的关系：vertical-align 和 line-height 之间的关系很明确，即“朋友”关系。最明显的就是 vertical-align 的百分比值是相对于 line-height 计算的，实际是只要出现内联元素，这对好朋友一定会同时出现。当前 line-height 计算值是 20px，而 font-size 只有 14px，因此，字母 x 往下一定有至少 3px 的半行间距（具体大小与字体有关），而图片作为替换元素其基线是自身的下边缘。根据定义，默认和基线（也就是这里字母 x 的下边缘）对齐，字母 x 往下的行高产生的多余的间隙就嫁祸到图片下面，让人以为是图片产生的间隙，实际上，是“幽灵空白节点”、line-height 和 vertical-align 属性共同作用的结果。
5.3.4 深入理解 vertical-align 线性类属性值。
1．inline-block 与 baseline：vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是 inline-block 元素，则规则要复杂了：一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。
2．了解 vertial-align:top/bottom：vertial-align:top 就是垂直上边缘对齐。用更通俗的话解释就是：如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果 display 计算值是 table-cell 的元素。
3．vertial-align:middle 与近似垂直居中。内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。 table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。
