使用inline-block时产生的元素上下偏移的问题

起因

原本想使用display: inline-block让这三块元素在水平方向上对齐，但是原本好好的，但是最左侧的元素，里面加了内容之后，就产生了如图所示的问题，元素之间上下偏移了。

解决办法

查了不少文章，最终查明了问题的原因所在。是因为虽然设置了display: inline-block，但是三个行内块元素的基准线没有对齐，所以导致如图第一个元素下沉的问题。

解决办法如下：

1. vertical-align

使用vertical-align可以让元素的垂直基准线向一个方向对齐，在这里，我们可以简单的对第一个元素设置样式

.item1 {
    display: inline-block;
    // 此处省略
    
    vertical-align: top;
}

这样就可以让元素1回到正常的位置，与其他一起对齐啦。

2. overflow: hidden

使用overflow: hidden也可以让行内块元素的基准线变为一起

注意事项

在查阅资料的时候发现，使用display: inline-block往往会造成元素与元素之间左右有着空格间隔。造成这一情况的原因是在元素之间使用了空格、回车等元素，所以会被识别，所以会出现空格间隔。我们可以将父容器设置font-size: 0来隐藏掉这些空格间隙

或者大家查看这篇文章，以解决间隔问题

https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%e5%8e%bb%e9%99%a4%e9%97%b4%e8%b7%9d/

来源：CSDN

作者：BB小天使

链接：https://blog.csdn.net/weixin_42963591/article/details/103480415