内联块 div 中的文本将其向下推[重复]答案

【问题标题】：Text in inline-block div pushing it down [duplicate]内联块 div 中的文本将其向下推[重复]
【发布时间】：2012-09-30 21:01:41
【问题描述】：

今天早上我发现了一个奇怪的 CSS 问题，我希望 CSS 专家可以帮助我。在this demo 中，为什么红色 div 中的文字会往下推？我预计这两个 div 会彼此相邻。谢谢！
编辑：谢谢大家的回答。我会接受一个答案。谁能解释为什么会这样？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

Demo

【讨论】：

你能解释一下你为什么不使用 float:left 吗，这是一个干净的解决方案。+1 。
是的，我认为这是最好的解决方案。谢谢！ :) 你知道为什么文本会导致这个问题吗？
如果您在任何 html 元素中定义显示 inline-block 元素，则可以使用 defulat inline-block 来显示内联块，而不是定义为始终垂直对齐顶部。
好的，感谢您的解决方案和解释！
哦，谢谢。我一生都无法弄清楚为什么所有的浏览器都在不同的高度绘制这些框（内联块）！我正要屈服并使用绝对定位......

【解决方案2】：

添加float:left 即可解决问题。

【讨论】：