这是在div中添加文本时的代码。

这是div中没有任何文本的代码。

我们知道在内联元素下面，默认情况下会添加一个空白。这同样适用于内联块元素。但是当我在inline-block元素中输入一些文本时，为什么空白会自动消失。

我想使用vertical-align：bottom属性。但是lorem5文本自己完成了这项工作。 这背后的概念是什么？？

顺晟科技：

它与元素的基线有关。空的内联块将以其底部边缘作为基线:

“inline-block”的基线是它在正常流中最后一个行框的基线，除非它没有inlin-flow行框，或者它的“overflow”属性具有除“visible”以外的计算值，在这种情况下基线是底部边距边缘。ref

所以在这两种情况下，基线是不一样的。

要更好地理解，请考虑内联块元素旁边的一些文本，以了解baseline是如何创建该空间的:

我认为以上是不言自明的。我已经使用递减字母来理解为什么我们需要底部空格。

如果更改对齐方式（这是大多数问题中提供的常见解决方案），则将不再有该空间: