html - 为什么这段文字会移动我的div？

我有一个白色的格子后面有一个绿色的格子
(like this)。
我试图将文本放在每个div中，但是由于某种原因，当我给出一个div文本时，该div向下移动(like this)。我可以使用什么css属性/HTML技术使div保持原位，同时仍然保存文本？
HTML由一个div和这个CSS组成：

#main {
top: 50px;
height: 280px;
width: 100%;
background-color: green;
position: fixed;
}

包含此CSS的div：

.small {
position: relative;
background-color: white;
border: 4px solid black;
width: 5%;
height: 80px;
display: inline-block;
margin-top: 2px;
}

看起来像这样：

<div id="main">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<!-- etc -->
</div>

最佳答案

它们在基线处对齐。如果有文本，这是文本的基线（即最后一行文本的基线），如果没有，它就在容器底部附近。
添加

.small {
  vertical-align: top;
}

改变这个。
这是一个密码笔：http://codepen.io/anon/pen/oxVajG

关于html - 为什么这段文字会移动我的div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37174860/