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

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>

这是一张图片，可以更好地说明我的问题。 图片

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

我知道这很可能与这样一个事实有关，即行内元素不尊重宽度，但内联块元素尊重宽度。

有谁知道为什么会这样？

标签： htmlcss

Answer 1

您的答案在规范范围内。

对于内联格式化上下文中的每个内联（包括匿名内联；请参阅 [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元素内部的空间一起折叠。

内联块

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

^{相关：CSS 规范 - 原子内联级别框}

元素内的空格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>