为什么这些输入字段会掉落？

Question

两个输入字段here - 为什么它们会掉落，而不会呈现在顶部？

代码：

<form style="height: 200px;display: block;">
  <span id="inputs" style="height: 100px;display: inline-block;">
    <input value="AAA" style="display: inline;">
    <input id="email" value="Your Email">
  </span>
  <div id="form-right-column" style="display: inline-block; width: 122px; height:50px; background-color:blue">
  </div>
</form>

人们，请不要只是发布一个解决方案，我想真正理解为什么会发生这种情况，而不仅仅是解决它。

Answer 1

嗯，将vertical-align: top;添加到form-right-column似乎可以解决问题。

Answer 2

使用vertical-align: top;标记中的span将其呈现在顶部。

Answer 3

http://jsbin.com/epoqus/3

您需要vertical-align:top默认值类似于baseline或其他