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

起因

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

解决办法

查了不少文章,最终查明了问题的原因所在。是因为虽然设置了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/wo...
阅读 531

推荐阅读