内嵌块div中的文本将其推下 [英] Text in inline-block div pushing it down

问题描述

今天早上我发现了一个奇怪的CSS问题，我希望CSS专家能够帮助我。在这个演示中，为什么红色格中的文本会将其推倒？我预计这两个div将会彼此相邻。谢谢！

编辑：谢谢你们的答案。我会稍微接受一个答案。任何人都可以解释为什么会发生这种情况？

I discovered a strange CSS problem this morning and I'm hoping the CSS experts can help me out. In this demo, why is the text in the red div pushing it down? I expected that the two divs would be next to each other. Thanks!
Thanks guys for the answers. I will accept an answer in a bit. Can anyone explain why this is happening?

推荐答案

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

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

你现在习惯了 vertical-align：top;

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

演示

这篇关于内嵌块div中的文本将其推下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！