悬停将在块之间添加空间

Question

当菜单悬停在菜单上方时，菜单中总会出现一些奇怪的出现空间。由于我是新手，我不知道它来自哪里

nav,
nav ul {
  list-style: none;
  margin: 0px;
  border: 0px solid black;
  display: inline;
  background-color: #d3d3d3;
  padding: 4px;
  text-transform: uppercase;
  text-align: center;
}
nav li {
  list-style: none;
  margin: 0px;
  padding: border: 1px solid black;
  display: inline;
  background-color: #d3d3d3;
  text-transform: uppercase;
  text-align: center;
}
nav a {
  text-decoration: none;
  display: inline-block;
  color: black;
}
nav a:hover {
  margin: 0px;
  padding: 4px;
  border: 1px solid black;
  display: inline;
  background-color: #cc0000;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
#currentlink {
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display: inline;
  background-color: #cc0000;
  padding: 4px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

<nav>
  <ul>
    <a href="home.html">Home</a>
    <a id="currentlink" href="news.html">News</a>
    <a href="bilder.html">Bilder</a>
    <a href="videos.html">Videos</a>
  </ul>
</nav>

Answer 1

nav a:hover有一个填充和边框设置，但它们不在nav a上。这基本上是将这些添加到元素的宽度。

移动：

padding: 4px; 
border: 1px solid black;

到nav a，这将是固定的。

您还合并了nav li样式

中的填充和边框