为什么两个内联元素之间的额外空间被背景色填充，但两个内联块元素之间的空间却没有？

Question

.div1 {
    display:inline;
    background-color:blue;
}

.div2 {
    display:inline;
    background-color: orange;

}

.div3 {
    display:inline-block;
    background-color:red ;
}


.div4 {
    display:inline-block;
    background-color:greenyellow;
}

<div class="div1">
   Lorem ipsum
</div>

<div class="div2">
    Lorem ipsum
</div> <br>

<div class="div3">
    Lorem ipsum
</div>

<div class="div4">
    Lorem ipsum
</div>

</body>

这里有一张图片可以更好地说明我的问题。 PICTURE

我知道这可能是一个愚蠢的问题并且在很大程度上无关紧要，但我只是想知道为什么第一个 inline-element 会创建一个额外的 4px 宽度来覆盖背景颜色，而 inline-block 元素会创建相同的4px 宽度，但不会被背景色覆盖。

我知道这很可能与以下事实有关：行内元素不尊重宽度，但行内块元素尊重宽度。

有人知道为什么会这样吗？

Answer 1

你的答案在the specification之内。

对于每个 内联（包括匿名内联；请参阅 [CSS2] 第 9.2.2.1 节）在内联格式化上下文中，...

紧随另一个可折叠空间的任何可折叠空间——即使是包含该空间的内联边界之外，只要两个空间都在同一个内联格式上下文中——被折叠成具有零前进宽度。 （它是不可见的，但保留了它的软包装机会，如果有的话。）

这有点复杂，但在内联元素的情况下，空间将折叠成一个空间，该空间将在第一个内联元素内，而不是在两个内联元素之间。这是因为您的内联元素末尾有一个空格。换句话说，所有的空间都将折叠成第一个空间，而第一个空间的位置将决定视觉效果。

删除行内元素末尾的空格，你会得到不同的结果：

.div1 {
  display: inline;
  background-color: lightblue;
}

.div2 {
  display: inline;
  background-color: orange;
}

<div class="box">
  <div class="div1"> Lorem ipsum </div>
  <div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
  <div class="div1"> Lorem ipsum</div>
  <div class="div2"> Lorem ipsum </div>
</div>

第二个元素内有空格的配置：

.div1 {
  display: inline;
  background-color: lightblue;
}

.div2 {
  display: inline;
  background-color: orange;
}

<div class="box">
  <div class="div1"> Lorem ipsum </div>
  <div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
  <div class="div1"> Lorem ipsum</div><div class="div2">   Lorem ipsum </div>
</div>

---

inline-block 不同，因为外部空间不能与 inline-block 元素内部的空间一起折叠。

内联块

此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。^ref

^{相关：CSS Spec - Atomic Inline Level Boxes}

inline-block 元素内的空格是单独进行的，它们将按照以下规则进行修剪：

1. 行首的一系列可折叠空格被删除。

2. 删除一行可折叠空格末尾的序列，

然后inline-block 元素之间的空格将折叠成一个空格。因此，在所有情况下，您的 inline-block 元素之间都会有一个空格，无论内部/外部空格的组合，除非它们之间没有空格

.div1 {
  display: inline-block;
  background-color: lightblue;
}

.div2 {
  display: inline-block;
  background-color: orange;
}

<div class="box">
  <div class="div1"> Lorem ipsum </div>
  <div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
  <div class="div1"> Lorem ipsum</div>
  <div class="div2"> Lorem ipsum </div>
</div>

<div class="box">
  <div class="div1"> Lorem ipsum</div><div class="div2">   Lorem ipsum </div>
</div>