关于css:overflowhidden导致元素高度增加的问题

overflow:hidden

这是大家罕用的 css 属性。在工作过程中，遇到下列问题：
制作一个信息显示标签，如下图所示，一个标签蕴含一个 icon 和一段文字。

当初需要是：分支标签的文字过长时用省略号代替显示，于是给这个分支标签的 div 元素设置了：

    overflow: hidden;
    max-width: 170px;
    text-overflow: ellipsis;
    white-space: nowrap;

试图让标签宽度超过 170px 时，显示省略号。然而却呈现了下图的状况：

这是为森呢？？？？

通过查阅材料。发现原来是我为了让标签并列显示，给标签容器的 div 设置了 display：inline-block。而 overflow：hidden 和 display: inline-block 一起应用时会造成 baseline 的挪动，所以高度就变得不一样了。
当 inline-block 元素的 display 不为 visible 的时候，其 baseline 为 margin-box 的下边界（如下图左侧元素），而左边的元素没有设置 overflow:hidden, 他的 baseline 为文字内容的基线。baseline 对齐之后则呈现了这样的高度差。

通过设置两个标签的 vertical-align 为 bottom（只有 vertical 的值不为 baseline），就能够回到同一基线上。实现对齐。

参考文章:
CSS 中 vertical-align 的默认值 baseline 的了解