给 a 标签设置 display:inline-block 之后 a 整体下沉

今天给一个a设置宽高，前提是添加了display:inline-block；然后发下a没有与父元素div顶部对齐，反而下沉了。试了好多办法都没成功，然后在网上找的教程。

原因

1、问题就是出在了display:inline-block;语句上，行内块元素有一个基线，所有一行中的元素都以这条基线为准对齐。基线指的是一排字横排时下沿的基础线。这也是为什么a下沉了下来，就是因为a要以基线对齐。
2、另外我检查css样式的时候发现css初始化的时候设置了line-height:1.5。这样也会导致a下沉。

解决办法

1、可以设置vertical-align，默认是baseline,设置这个值，top,bottom,middle随便一个，就可以顶部对齐了。
2、使用float等其他方法替换inline-block。

reference:
1、多个div设置display:inline-block;以后，其中一个盒子写了文本以后会下沉的原理，讲解的很清楚的一篇博客；
#css中inline-block出现下移的情况
2、为什么display:line-block的a标签会加上文字之后会向下移动呢？
3、解决因inline-block元素导致的空白间距和元素下沉