为什么当我在 inline-block 元素中添加文本时空格消失了？答案

【问题标题】：Why the whitespace vanished when I added text in inline-block element?为什么当我在 inline-block 元素中添加文本时空格消失了？
【发布时间】：2021-11-24 01:54:58
【问题描述】：

这是我在inline-block div 中添加文本时的代码。

.block{
  display:inline-block;
}
.box{
  height:300px;
  width:300px;
  background:red;
}
.blue{
  background:blue;
}

<div class="box block">
  <p>hello</p>
</div>
<div class="box blue"></div>

这是没有任何文字的代码，在inline-block div 中。

.block{
  display:inline-block;
}
.box{
  height:300px;
  width:300px;
  background:red;
}
.blue{
  background:blue;
}

<div class="box block">
</div>
<div class="box blue"></div>

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

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

【问题讨论】：

这里是答案：stackoverflow.com/questions/4053575/…

标签： html css

【解决方案1】：

它与元素的基线有关。一个空的 inline-block 将以它的底边作为基线：

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

所以在这两种情况下，基线都不相同。

为了更好地理解，考虑一下 inline-block 元素旁边的一些文本，看看基线是如何创建该空间的：

.box {
  height: 100px;
  width: 100px;
  display: inline-block;
  background: red;
}

<div style="border:2px solid">
  <div class="box block">
    <p>hello</p>
  </div>
  pq jy
</div>

<div style="border:2px solid">
  <div class="box block">
  </div>
  pq jy
</div>

我认为以上是不言自明的。我已经使用下降字母来理解为什么我们需要那个底部空间。

如果您更改对齐方式，这是大多数问题中提供的常见解决方案，您将不再有那个空间：

.box {
  height: 100px;
  width: 100px;
  display: inline-block;
  background: red;
  vertical-align:top; /* or bottom or middle */
}

<div style="border:2px solid">
  <div class="box block">
    <p>hello</p>
  </div>
  pq jy
</div>

<div style="border:2px solid">
  <div class="box block">
  </div>
  pq jy
</div>

【讨论】：