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

Question

鉴于此HTML页面：

section[role=main] {

  margin: 1em;

  width: 95%;

  border: 1px solid #999;

}



section[role=main] article {

  width: 40%;

  height: 180px;

  margin: 1em;

  display: inline-block;

  border: 1px solid black;

}


<section role="main">

  <article>Java</article>

  <article></article>

</section>



<section role="main">

  <article>Java</article>

  <article>JavaScript</article>

</section>

我希望我的两篇文章都对齐，但是正如下面的屏幕快照所示，只有当我的两篇文章都带有文本时，<article>

Answer 1

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

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

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

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

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