背景
之前在调试样式的时候总喜欢加个vertical-align，但对于它的用法及在什么情况下使用一直不太清楚，今天就来捋捋。。。
定义和用法
??定义：vertical-align属性设置元素的垂直对齐方式。
??说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
好像不太懂，没关系~记着vertical-align只有对元素是inline或inline-block属性的才起作用，例如image、button等元素。
可能的值
/* 关键值 */
vertical-align: baseline; /*默认，元素放置在父元素的基线上*/
vertical-align: sub; /*垂直对齐文本的下标*/
vertical-align: super; /*垂直对齐文本的上标*/
vertical-align: text-top; /*把元素的顶端与父元素字体的顶端对齐*/
vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。*/
vertical-align: middle; /*把此元素放置在父元素的中部*/
vertical-align: top; /*把元素的顶端与行中最高元素的顶端对齐*/
vertical-align: bottom; /*把元素的顶端与行中最低的元素的顶端对齐*/
/* 长度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 百分比值 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit; /*规定应该从父元素继承 vertical-align 属性的值*/
vertical-align: initial; /*设置属性的初始值——浏览器的默认定义值*/
vertical-align: unset;
/*CSS 关键字 unset 是 关键字 initial 和 inherit的组合。
如果有继承父级样式，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。
换句话说这个unset关键字会优先用inherit的样式，其次会应该用initial的样式。*/
举栗子说明：
div{ background: lightblue; }
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527151587&di=19479c98feb4f0a8acb8a415d400dddb&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20121213%2Fbki-20121213205553-1886714253.jpg" alt="卡卡西">
</div>
这其实是vertical-align和line-height搞的鬼，vertical-align的默认值baseline，基线对齐，基线就是字母X的下边缘，所以图片的下边缘就和字母的下边缘对齐，而字符X本身是有高度的，于是下面就会有空白。
那要怎么解决呢
1、因为vertical-align只对inline和inline-block的元素起作用，所以将图片设置为block就可以。
2、不使用baseline，设置为bottom/middle/top都可以。
3、修改line-height的值，只要行高足够小，文字占据的高度的底部就会在x的上面。
4、使用font-size间接控制，比如它设置为0（比较极端），本质上还是改变line-height的值。
