添加内容时，Div元素会上升

Question

我有一个主包装器div，里面有一些内联块内容div。出于某种原因，当我的右下方内容div为空时，它处于降低的位置，然后当我向其添加一个按钮和输入元素时，它会升到我想要的正确位置。这种行为对我来说真的很困惑，我在这里重新创建它：https://jsfiddle.net/ywbyLdcn/3/，只需删除'outer4'div的内部div的内容，然后将其降低。

我感觉这种情况正在发生，因为其中一个插入的元素（按钮）上有填充，但我不确定：

button {
    margin-right: 5px;
    padding: 5px 10px 5px 10px;
}

任何人都可以帮我弄清楚为什么会这样吗？注意我实际上希望它处于抬起位置，当它为空时它会脱离线。

Answer 1

对此的一个快速解决方案是添加以下规则：

#wrap div {
  vertical-align: top;
}

这会选择div中的所有#wrap并使它们与顶部对齐，而不是默认的“基线”。详细了解vertical-align，here和here。

Fiddle