使用display:inline-block遇到的问题

Question

我将4个div设置inline-block后他们顶端没有对齐，我试了一下好像和里面字的多少有关，这是什么原因？

Answer 1

这四个块的基线位置是内部文字的基线位置，css规定如下。

inline-block 元素的基线是这个元素下正常文档流中最后一个 line box 的基线，除非这个元素中没有正常流的 line box 或者本身的 overflow 属性值不是默认的 visible ，这个时候 inline-block 元素的基线位置是margin的底边缘。

这些文字的基线位置可以这样确定：在文字末尾添加一个字母 x，x 的底边就是基线位置。
而元素之间默认是基线对齐，即 vertical-align：baseline，所以这四个块的位置没有顶端对齐。
具体的解决办法楼上已经给出了。

ps：关于 vertical-align 可以看看我总结的一篇文章

Answer 2

设置一下顶端对齐即可 vertical-align: top;