display: inline-block带来的问题

 情景一：两个相邻的inline-block元素（其中一个元素中有内容），出现了高度偏差的问题

<div class="inline-box">
    <span></span>
    <span>1</span>
</div>

.inline-box
    span
      display: inline-block
      width: 50px
      height: 50px
      border: 1px solid #000
      text-decoration: underline

1. 同一行的行内元素对齐方式默认是基线对齐，即vertical-align：baseline

2. 对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决方案：

为元素增加属性

vertical-align: top

 

情景二：

<div class="test1">
    前<div>12232144343252352353252352525235</div>后
</div>

.test1
    margin-top: 20px
    div
      font-size: 14px
      display: inline-block
      width: 100px
      overflow: hidden

 

 1. 如果inline-block的overflow设为visible（默认属性），则其baseline是当前行的containing block的baseline

 2. 如果overflow设为其他，则其bottom margin位于前行的containing block的baseline

inline-block元素被设置oveflow非visible后，其baseline被强制修改为元素下外边沿,该元素将底部与其他元素对齐

另外：This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the (JSFiddle).

You can fix this by also giving it vertical-align: bottom.

解决方法：

1. 为inline-block元素添加vertical-align: bottom

2. 将inline-block设为block

 

参考：

https://www.cnblogs.com/zml-mary/p/7722061.html

https://blog.csdn.net/cmlddcml/article/details/52798565