css中inline-block样式的问题

对于这样一段代码：

<div>
    <div style='display:inline-block; width:20px; height:20px; background:red;'></div>
    <div style='display:inline-block'>00:00</div>
</div>

我本以为显示的结果是：

但是实际结果确是：

虽然这个问题最终通过float取代inline-block解决了…但是还是不解为什么会产生这个问题…求大神解答……

---

两个并列的 inline-block 默认是基线对齐的，可以通过设置 vertical-align 属性使其顶部对齐。
将 vertical-align 设为 top 即可。
而且你的图是有问题的，00:00 应该默认与左侧的红色 div 基线是对齐的，如下：

再贴下这个篇：inline-block 前世今生