css - 为什么 "inline-block"会修剪元素内部末尾的空间？

Question

问题来了，当我有多个 <span> <p> 中的元素标记并给出 <span> inline-block 的 CSS , <span> 末尾的空格由 inline-block 修剪.

有人可以解释为什么会发生这种行为吗？

.container {
  width: 500px;
  margin: auto;
  font-size: 2em;
  border: solid 1px red;
}

.merge {
  white-space: nowrap;
  display: inline-block;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur <span class="merge">adipisicing elit, </span><span class="merge">Provident, </span><span class="merge">amet, </span><span class="merge">facere, </span><span class="merge">modi itaque, </span><span class="merge">praesentium, </span><span class="merge">nihil quam? </span><span class="merge">Nostrum, </span><span class="merge">aut assumenda, </span><span class="merge">Doloribus vitae, </span><span class="merge">necessitatibus, </span><span class="merge">iusto, </span><span class="merge">debitis, </span><span class="merge">aliquam, </span><span class="merge">odit, </span><span class="merge">pariatur, </span><span class="merge">fuga, </span><span class="merge">mollitia, </span><span class="merge">magni, </span></p>
</div>

Answer 1

在每个内联 block 中，前导和尾随空格被视为无关紧要且不会呈现，遵循与 section 16.6.1 of CSS2 中常规 block 元素相同的规则.这是因为内联 block 与常规 block 一样，是 block 容器盒，每个都建立自己的内联格式化上下文。

具体来说，以下适用于“每一行”的步骤实际上适用于每个内联 block ，因为它可以这么说包含自己的“文本行”。内部文本并不全部占据与内联 block 本身相同的行框，而是内联 block 控制的内联格式化上下文。

As each line is laid out,

1. If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.

2. [...]

3. If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.

这与默认的 display: inline 不同，后者确实会导致所有文本在相同的行框上呈现。因此，默认跨度中的任何空格都不会被修剪，除非它们位于一行的开头或结尾。