是的，空间是设计的，应该是

有原因吗？是的。添加的内容实际上是字空间。就像你有两行文字一样。浏览器在不同行中的文本之间放置一个空格，因此最后一个单词不会触及下一行的第一个单词：

<p>
  This is my text that's in two lines
  inside my HTML source.
</p>

行和里面之间会有一个通常的字空间，因此文本会在浏览器中正确显示：

这是我的文字，在我的HTML源代码中有两行。

在您的情况下也会发生同样的情况，因为您的元素是内联的。您的导航元素在HTML源代码中每行列出一个，因此会在它们之间添加分词。

如何避免元素之间的空间过多？

基本上有3种方法可以缓解此问题。所有这些都在前提下将所有元素放在HTML渲染器所看到的同一行：

将所有元素置于一行：
```
<ul>
    <li>First</li><li>Second</li>...<li>Last</li>
</ul>
```
这个实际上将所有元素放在一行中，这可能使人们更难以操纵这些元素。如果每个LI内部都有一个锚标记（带有长链接），则此行太长而无法处理。

注释掉线：

<ul><!--
    --><li>First</li><!--
    --><li>Second</li><!--
    ...
    --><li>Last</li><!--
--></ul>

制作代码突破：
```
<ul
   ><li>First</li
   ><li>Second</li
    ...
   ><li>Last</li
></ul>
```
这一点对于眼睛来说是最不突兀的，但对于初学者来说可能看起来很混乱，因此其他团队成员（如果你在这样的环境中工作）可能会感到很想把标记结束回到它们原来的位置（通常是这样）。他们可能觉得这些因错误而被打破。

在this JSFiddle example中可以看到所有这三个人的结果。

选择最适合你的人。我通常使用评论，因为它在我的开发编辑器中最不会分散注意力，因为评论非常微妙。