内联块div中的文本将其向下推

Question

今天早上我发现了一个奇怪的CSS问题,我希望CSS专家可以帮助我.在这个演示中,为什么红色div中的文本会将其推下来？我预计这两个div会彼此相邻.谢谢!
编辑:谢谢大家的答案.我会稍微接受一个答案.任何人都可以解释为什么会这样吗？

Answer 1

...........................

嗨现在习惯了 vertical-align: top;

div {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: top;
}

演示