内联块元素和垂直对齐推理

Question

我有两个div框，使用display：inline-block。

没有内容，内联块div都垂直对齐到顶部。

如果两者都有内容，它们也垂直对齐到顶部。

如果只有其中一个文本内容，则具有文本内容的div框垂直对齐到底部，而没有任何文本内容的div框保持垂直对齐到顶部。

如果一个框具有纯文本内容而另一个框具有例如输入字段或标题标记然后仅具有文本内容的框仅向下移动（可能是2或3px），而具有输入或标题标记的框则保持在顶部。

请参阅下面的jsfiddle链接

为什么创作者会这样做而不是始终将它们对齐到顶部？这背后有更深层次的原因吗？

Answer 1

<强>更新

在您的示例中，只需添加：

.content_boxes{
    width: 400px;
    height: 200px;
    background: lightgreen;
    display: inline-block;
    vertical-align:top;
}

小提琴：

http://jsfiddle.net/genwQ/1/

您必须将vertical-align:top;设置为每个元素display:inline-block;。小心不要混淆：它是元素，而不是父母。

示例：

ul li {
    display:inline-block;
    vertical-align:top;
}

演示：

http://jsfiddle.net/X3RLB/

意识到inline-block个元素之间会出现不需要的空格。无法使用margin:0px;属性删除此空间。要删除它们，您必须在inline-block元素之间添加注释标记。

示例：

<div id="content_cnt">
    <div class="content_boxes"></div><!--
    --><div class="content_boxes">dsasda</div>
</div>

小提琴：

http://jsfiddle.net/genwQ/2/