为什么跨度会因元素定义之间的空间而有所不同？

Question

为什么元素布局对它们之间存在空格或换行有关系？

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

我想要解决的是让我的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

这个空间被称为白色空间，就像你在两个单词之间放置的空间。所以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>

如果你想避免换行，你可以考虑属性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>