两个inline-block 元素为什么会错位显示？

Question

具体代码 demo

问题： 为什么a标签设置overflow和不设置overflow 显示效果不同？

不设置如下显示

设置后如下显示

v

Answer 1

overflow:hidden的这个属性影响了inline-block元素baseline的位置；因为你的list也是行内块，也设置了overflow，而后下一个元素与前一个元素基线对齐就错位了，第二个也设置，baseline也改变就不错位了

   <div>
       <span>11</span>
       <span class="desc">22</span>
       <span>33</span>
       <span>44</span>
    </div>
   span{
     display:inline-block;
   }
   .desc{
     overflow:hidden;
   }
   
 // 这时候另外的span元素会向下偏移；

// 解决方案，修改vertical属性；
    .list {
        display: inline-block;
        width: 80px;
        height: 80px;
        overflow: hidden;
        vertical-align:middle;
    }

    .add {
        display: inline-block;
        width: 76px;
        height: 76px;
        color: #ccc;
        border: 2px dashed;
       
        transition: color .25s;
        position: relative;
        /**
        为什么不设置overflow  a标签就会下沉显示？
        **/
        /* overflow: hidden; */
          vertical-align:middle;
    }