简单说说vertical-align

背景

之前在调试样式的时候总喜欢加个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; }

    

这么简单的例子能出现啥问题呢？如图：

图片下方会有个空隙，这是为啥呢？这就要说vertical-align的默认值了，是baseline，借用张鑫旭大神的一张图来说明，基线不是在最底部。

再加些文字并加个白色的背景色，可以发现图片和文字的下边缘是对齐的，为什么会这样？

这其实是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的值。