情景一:两个相邻的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
参考: