Html 为什么内联块div只有一个有文本时没有对齐？

现场页面

给定此HTML页面：

section[role=main]{
边缘：1米；
宽度：95%；
边框：1px实心#999；
}
第[role=main]节文章{
宽度：40%；
高度：180像素；
边缘：1米；
显示：内联块；
边框：1px纯黑；
}

JAVA
JAVA
JavaScript

添加：

vertical-align: bottom;

你的第二条规则应该让它起作用。显然，没有文本的内联块被渲染为内联图像或其他内容，并且这些元素的垂直对齐是不正确的，因此强制它们与底部对齐可以解决这个问题

---

来源：

内联块元素由其父元素的

文本对齐定位

如果块中没有文本，则没有要对齐的内容

您可以使用
display:block
和float，或者我的建议是插入一个带有伪元素的非中断零宽度空间：

section[role=main] article:before {
  content: "\2060";
}

克隆

将垂直对齐添加到文章：

section[role=main] article { 
  ...
  vertical-align: middle;
}

这是CSS中“基线”垂直对齐的结果。从

基线
将长方体的基线与父长方体的基线对齐如果该框
没有基线，请将底部边距边缘与父级基线对齐。（我的重点）

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

当内联块中没有文本时，它就没有基线，因此应用第二个（粗体）句子

在这里的JSFiddle中：我已经从您的示例中删除了
边距：1em
，它（至少对我来说）造成了一种误导性的错觉，并添加了文本
baseline
，以显示包含框的基线位置。基线位于单词“基线”的底部，因此您可以看到，根据上面的CSS规则，空内联块的底边距边缘与父对象的基线对齐。
在空文章中添加
可以解决此问题，但我正在寻找更好的解决方案。@bookcasey我知道，但是我想知道是什么首先导致了这种行为。谢谢，但是为什么首先需要它呢？一个更正式的解释会有帮助。这应该是选择的答案。我认为这样效果更好