Why my inline-block divs are not aligned when only one of them has text?[duplicate]

这是CSS中“基线”垂直对齐的结果。根据CSS 2.1规范的第10.8节“线高计算”：“ line-height”和“ vertical-align”属性

基准线
将框的基线与父框的基线对齐。如果该框没有基线，则将下边距边缘与父级的基线对齐。（我的重点）

由于内联块的默认对齐方式是“基线”，因此除非被覆盖，否则将应用此规则。将文本放入内联代码块时，该
文本将为内联代码块创建基线，并且第一句（非粗体）适用。

如果内联块中没有文本，则它没有基线，因此第二句（加粗）适用。

在此处的JSFiddle中：http : //jsfiddle.net/WjCb9/1/我从您的示例中删除了margin:1em正在（至少对我而言）造成误导性错觉的情况，并添加了文本baseline以显示包含框的基线在哪里是。基线位于“基线”一词的底部，因此
您可以看到空的内联块的底部边距边缘与上述CSS规则所要求的父级基线对齐。