为什么子伪元素设置为显示内联块时父元素有额外的空间？ [复制]

Question

这个问题在这里已经有了答案：

• div 内的图像在图像下方有额外空间9 个答案
• 为什么这个 inline-block 元素被向下推？ 8 个答案

示例： https://codepen.io/229075284/pen/aboQVXZ

 .outer{ background-color: pink; }.outer::after{ content:''; background-color: red; display: inline-block; font-size: 0; line-height: 0; overflow: hidden; height: 0; /* display: table; */ }.inner{ background-color: blue; height: 300px; }

 <div class="outer"> <div class="inner"></div> </div>

当我将outer::after的display设置为inline-block时，即使将font-size和line-height设置为0 ，外部也会有一些额外的空间标记为粉红色。 但是，当我将display设置为table时，多余的空间消失了。

所以我想知道为什么会出现额外的空间？

Answer 1

我检查了你的代码笔。 它是::after伪元素上display: inline-block和content: ""的组合。 您基本上是在告诉浏览器，您想在外部元素之后保留一个元素在 DOM 中的位置。

您可以看到，如果您删除content: "" ，尽管您正在使用 inline-block，但.outer元素之后的额外伪 div 将会消失。 这是因为尽管您声明了某种显示模式，但实际上该元素中没有内容，并且浏览器会忽略您的元素，因为它没有固定的像素大小，也没有实际内容。

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

您的问题与line-height或“溢出”无关。

就我个人而言，我不喜欢在生产中使用::after和::before之类的伪类。 我更喜欢使用常规的 div 并且让我的代码更容易被其他开发人员阅读和理解，无论如何我希望我能帮上忙。 如果您有更多问题，请随时进一步讨论。