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

Question

我有一个白色 div 网格，后面有一个绿色 div (like this) .我试图在每个 div 中放置文本，但出于某种原因，当我提供一个 div 文本时，该 div 被向下移动了 (like this) .我可以使用什么 css 属性/HTML 技术使 div 在保留文本的同时保持原位？

HTML 由带有此 CSS 的 div 组成:

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

Answer 1

它们在基线处对齐。如果有文本，那就是文本的基线(即文本的最后一行)，如果没有，它就在容器底部附近。

添加

.small {
  vertical-align: top;
}

改变这个。

这是一个代码笔:http://codepen.io/anon/pen/oxVajG