当 display: inline-block 和 overflow: hidden 一起使用的时候，会发现文字的显示比一般正常的情况要“高”一些。举个例子来说：
god
上面的四个文字中，第一个 o 被设置为 display:inline-block 以及 overflow:hidden。最终的显示效果，第一个 o 的底部明显高于两边的 g 和 o。
通过给第一个 o 和整行文字画上边框，不难发现，这个文字是整体被抬高了。
god
在上面的例子中，inline-block 的高度是由 line-height 决定的，因而看上去会比 inline 情况时候的要高（inline 情况下 border 画出来的高度是固定的，由 font-family 和 font-size 决定）；同时，overflow:hidden 会让内容的底部和父元素的文字基线（baseline）持平，从而会让整体的显示结果更高（这一点从上面的显示中不难发现，其中 g 的部分有少量是低于基线显示的，可以看到也低于第一个 o 的底部区域）。
因此，在这种情况下，line-height 越大，会看到这种情况下的文字越是高，高出来的空白区域主要是 line-height 本身比文字大的部分，以及对齐方式不同造成的差异距离。
上述这种情况，想要正确的对齐，只需要修改垂直对齐的方式就可以了。设置 vertical-align:bottom 后的结果：
god
符合预期。