inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

1.背景

将一个行内元素设为行内块，再设置溢出属性时：

 span {
        width: 100px;
        display: inline-block;
        overflow: hidden;
    }

会导致左右相邻元素被奇怪的向下拉动了一定的距离。

2.解决方法

设置其对齐基准为bottom，vertical-align: bottom;

 span {
        width: 100px;
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
    }