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

【问题标题】：Why do spans break differently depending on space between element definitions?为什么跨度会根据元素定义之间的空间而不同？
【发布时间】：2018-03-04 12:12:50
【问题描述】：

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

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

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

这是为什么呢？有没有一个术语我可以谷歌了解更多信息？当容器很窄并且当容器足够宽时它们之间没有可见空间时，我如何才能让两个跨度始终换行？

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>

【问题讨论】：

标签： html css cross-browser

【解决方案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>

【讨论】：