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