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

Question

为什么元素布局之间存在空格或换行符很重要？

例如 <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是一个内联元素，因此它的行为类似于文本。

要删除它们，您可以将字体大小设置为 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>