Html 箱子从原来的位置移开了

我有一些HTML框，但其中一个框正在从原来的位置移动。这是

HTML 截图

PS：我知道这是因为盒子里有三个字。设置

overflow-y:hidden

修复此问题。但我想知道为什么会发生这种情况？

示例代码：

将

vertical align:top

添加到

.box

元素中（因为默认情况下，垂直对齐是

基线

，当前对齐如下图所示）

---

您可以将

显示：内联块；

更改为

浮动：左；

---

我同意这一点。因为我看不出它是

display:inline block

+1压缩解决方案+1的理由。你能告诉我问题的原因吗。Opps删除那条评论。它在第一个框中是你的文本。它有两行。啊，我们开始了。回答者已经在回答中解释了。+1。

<div id="summary">
    <div class="box"><span>Average fill time</span></div>
    <div class="box"><span>Listing</span></div>
    <div class="box"><span>Archive</span></div>
    <div class="box"><span>Views</span></div>
    <div class="box"><span>Submissions</span></div>
</div>

.box {
  height: 60px;
  width: 80px;
  display: inline-block;
  text-align: center;
  padding: 20px;
  border: 1px solid;
  margin: 10px;
}