Css 当子伪元素设置为显示内联块时，为什么父元素有额外的空间？

例如：

.outer{
背景颜色：粉红色；
}
.外部：：之后{
内容：''；
背景色：红色；
显示：内联块；
字号：0；
线高：0；
溢出：隐藏；
身高：0；
/*显示：表格*/
}
.内部{
背景颜色：蓝色；
高度：300px；
}

---

我检查了你的密码笔。它是

显示：内联块

和

内容：

在

：：之后的伪元素的组合。您基本上是告诉浏览器，在外部元素之后，您希望保留元素在DOM中的位置

您可以看到，如果删除
内容：“
”，尽管您使用的是内联块，
外部元素之后的额外伪div将消失。这是因为，尽管您声明了特定的显示模式，但实际上此元素中没有任何内容，浏览器会忽略您的元素，因为它没有固定的像素大小，并且其中没有实际内容

.outer
增长的原因是其高度在默认情况下设置为
auto
，如果您给它一个固定的像素高度，它可能不会显示备用div

你的问题与
行高
或“溢出”无关

就我个人而言，我不喜欢在生产中使用伪类，如
：：after
和
：：before
。我更喜欢使用常规div，让我的代码更容易被其他开发人员阅读和理解，无论如何，我希望我能帮上忙。如果您有更多问题，请随时进一步讨论。
我已经将
行高设置为
0
，并将
溢出设置为
隐藏，但它仍然存在。而且，当我删除
outer:：after
的
content
时，伪元素将在DOM树中消失。否则，我尝试将
outer:：after
的
content
设置为
url（），额外的空间仍然存在。字体大小和线条高度应该放在父元素上，溢出：hidden正在将元素的基线更改为其底部，这就是为什么即使元素中有文本，也会出现此问题。这将使其行为与图像相同，因此第一个副本（第二个副本将允许获得有关对齐的更多详细信息）