删除导航边框和导航内元素之间的空间

问题描述

这不是什么大问题，但我想知道为什么导航栏的边框和角落处的元素之间仍然存在空间。这是我的 HTML 和 CSS 代码以及我所指问题的图像。我更改了边距但仍有空间，我也尝试将元素与元素放在同一行，但空间仍然存在。

重要提示：页面放大后边距消失

a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1em;
  margin: 0;
}

a:hover {
  background-color: green;
}

ul,li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
  max-width: 50%;
  justify-content: space-around;
  flex-grow: 1;
}

nav {
  position: sticky;
  top: 0;
  width: 90%;
  margin: 0;
  padding: 0;
  border-left: 5px solid black;
  border-right: 5px solid black;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: greenyellow;
}

<nav>
  <a href="#home" id="ho">Home</a>
  <ul>
    <li>
      <a href="#products">Products</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
  </ul>
  <a href="signup">Sign Up</a>
</nav>

解决方法

现在不应该发生，我已经给了 margin: 8px 0 这只是 margin: 8px

body {
 margin: 8px 0;
 }

a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1em;
  margin: 0;
}

a:hover {
  background-color: green;
}

ul,li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
  max-width: 50%;
  justify-content: space-around;
  flex-grow: 1;
}

nav {
  position: sticky;
  top: 0;
  width: 90%;
  margin: 0;
  padding: 0;
  border-left: 5px solid black;
  border-right: 5px solid black;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: greenyellow;
}

<nav>
  <a href="#home" id="ho">Home</a>
  <ul>
    <li>
      <a href="#products">Products</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
  </ul>
  <a href="signup">Sign Up</a>
</nav>