html - 为什么两个行内元素之间的额外空间填充了背景颜色，而两个行内 block 元素之间的空间却没有？

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内.

For each inline (including anonymous inlines; see [CSS2] section 9.2.2.1) within an inline formatting context, ...

Any collapsible space immediately following another collapsible space—even one outside the boundary of the inline containing that space, provided both spaces are within the same inline formatting context—is collapsed to have zero advance width. (It is invisible, but retains its soft wrap opportunity, if any.)

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

.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内部的空间一起坍塌。元素。

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.^ref

相关:CSS Spec - Atomic Inline Level Boxes
里面的空格inline-block元素单独进行，它们将按照以下规则进行修剪:

1. A sequence of collapsible spaces at the beginning of a line is removed.

2. A sequence at the end of a line of collapsible spaces is removed,

然后是 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>