为什么跨度会根据元素定义之间的 space 不同而不同？

Question

为什么它们之间存在 space 或换行符对元素布局很重要？

例如<span/><span/> 与 <span/> <span/> 的行为不同（注意 space）。

我试图解决的问题是让我的 span 元素换行，但在它们不换行时也没有可见的 space。在下面的代码片段中，您可以看到先是宽段落然后是窄段落中定义的跨度对，第一个不使用任何间距的示例不会像其他示例那样换行。

这是为什么？有没有一个术语我可以google了解更多？当容器很窄 AND 当容器足够宽时它们之间没有可见的 space 时，如何让两个 span 总是换行？

p {
  width: 135px;
  background-color: pink;
}

.narrow {
  width: 35px;
}

h1 {
  font-size: 140%;
}

<h1>
  No space:
</h1>

<p>
  <span>Foo</span><span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span><span>Bar</span>
</p>

<h1>
  Space between element definitions:
</h1>

<p>
  <span>Foo</span> <span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span> <span>Bar</span>
</p>

<h1>
  New line between element definitions:
</h1>

<p>
  <span>Foo</span>
  <span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span>
  <span>Bar</span>
</p>

Answer 1

这个space叫做白色space它就像一个space你放在两个词之间。所以 this is a text 不同于 thisisatext 并且 span 是一个内联元素，所以它的行为类似于文本。

要删除它们，您可以将 font-size 设置为 0:

p {
  width: 135px;
  background-color: pink;
  font-size:0;
}

.narrow {
  width: 35px;
  font-size:0;
}
span {
 font-size:initial;
}

h1 {
  font-size: 140%;
}

<h1>
  No space:
</h1>

<p>
  <span>Foo</span><span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span><span>Bar</span>
</p>

<h1>
  Space between element definitions:
</h1>

<p>
  <span>Foo</span> <span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span> <span>Bar</span>
</p>

<h1>
  New line between element definitions:
</h1>

<p>
  <span>Foo</span>
  <span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span>
  <span>Bar</span>
</p>

如果您想避免 line-break，您可以考虑属性 white-space 并将其设置为 nowrap:

p {
  width: 135px;
  background-color: pink;
  font-size:0;
  white-space:nowrap;
}

.narrow {
  width: 35px;
  font-size:0;
}
span {
 font-size:initial;
}

h1 {
  font-size: 140%;
}

<h1>
  No space:
</h1>

<p>
  <span>Foo</span><span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span><span>Bar</span>
</p>

<h1>
  Space between element definitions:
</h1>

<p>
  <span>Foo</span> <span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span> <span>Bar</span>
</p>

<h1>
  New line between element definitions:
</h1>

<p>
  <span>Foo</span>
  <span>Bar</span>
</p>
<p class="narrow">
  <span>Foo</span>
  <span>Bar</span>
</p>

为什么跨度会根据元素定义之间的 space 不同而不同？

Why do spans break differently depending on space between element definitions?

html

css

cross-browser