关于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的了解