overflow:hidden导致元素高度增加的问题

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的理解