盒子从它的位置转移

Question

我有一些HTML格式的盒子，但其中一个盒子正在从它的位置转移。这是JsBin Demo

HTML

<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>

CSS

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

截图

PS：我知道这是因为盒子里有三个字。设置overflow-y: hidden可解决此问题。但我想知道为什么会发生这种情况？

Answer 1

示例代码：http://jsbin.com/elOdOpa/1/edit

将vertical-align: top添加到.box元素中（因为默认情况下垂直对齐为baseline，当前对齐方式如下图所示

Answer 2

您可以将display:inline-block;更改为float:left;。

JSBin