inline-block布局元素水平错位

错位产生：

1.inline-block定义元素，同时兼具块级元素和行级元素

2.display：inline-block，存在基准线的问题，是基于baseline对齐的，大小不一会导致上下不齐，

错位消除：

定义display：inline-block，想要实现元素水平对齐时，最好搭配vertical-align属性。

额外需要考虑外层父元素font-size:0

现象表示：

display：inline-block未定义vertical-align属性

display：inline-block定义了vertical-align属性

来源资料：

https://www.cnblogs.com/hutuzhu/p/4533270.html