为什么这两个列表列出了不同的

Question

我有两个内联列表。一个是我期望的，另一个是项目之间的空格。

ul {
  list-style: none;
  margin: 0;
  padding: 0
}
li {
  display: inline;
}
a {
  border: 1px solid black;
  font-size: 1rem;
}

<br>
<nav>
  <ul>
    <li><a href="#">ONE</a>
    </li>
    <li><a href="#">TWO</a>
    </li>
    <li><a href="#">THREE</a>
    </li>
  </ul>
</nav>
<br>
<nav>
  <ul>
    <li>
      <a href="#">
              ONE
            </a>
    </li>
    <li>
      <a href="#">
              TWO
            </a>
    </li>
    <li>
      <a href="#">
              THREE
            </a>
    </li>
  </ul>
</nav>

我得到的是两个内联导航设置，其中一个没有空格，另一个空格。以下是生成的代码的图像： 为什么呢？

Answer 1

当HTML具有持续一段时间的空白时，Web浏览器会将其解释为一个空格。只需删除ONE TWO THREE所在的空白区域。

Answer 2

在第一种情况下，空格位于锚标记之外。第二，空间放在里面。所以链接文本包含空格。