vertical-align起作用是有前提条件的，只能作用在display计算值为inline，inline-block，inline-tabl或者table-cell的元素上。因此，块级元素是不支持的
vertical-align的百分比是相对于line-height计算的。
间隙产生的三大元凶：幽灵空白节点、line-height和vertical-align，解决方案也是从这里入手：
1. 图片块状化，干掉幽灵空白节点
2. 容器line-height足够小，只要半行间距小到字母x的下缘位置或者再往上就没有撑开的间隙了
3. 容器的font-size足够小
4. 图片设置其他vertical-align属性
vertical-align的属性默认值baseline在文本之类的内联元素就是字符x的下边缘，对于替换元素则是替换元素的下边缘。但对于inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则其基线就是元素里面最后一行内联元素的基线