为什么我的内嵌块div中只有一个包含文本，它们不对齐？

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