两个inline-block元素上下不对齐，出现错位

摘要: 声明：此文章为转载（点击查看原文），如有侵权24小时内删除。联系QQ：1522025433.

问题描述：在类似

1 <div class="ovh">
2      <h3 class="lh24 h24">
3          <img class="dib"><p class="h24 lh24 dib">发现深藏的好店</p>
4      </h3>    
5 </div>

的布局中img和p都设置为inline-block。发现两个元素虽然在同一行上，但并不对齐。

是基线对其问题，进一步来说，两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果？原因在于容器使用了 overflow: hidden 属性，这一属性改变了 inline-block 元素的基线位置，导致这一元素上移。因此，同时设置两个元素的垂直对齐方式为非基线对齐的值，或为另一个元素添加 overflow 属性都可以解决这一问题。

包括通过display：inline-block;转为的两个行内快元素。