导航栏周围有边框，无法删除

Question

我正在尝试为我的网站创建导航栏，但发生了一些奇怪的事情。它是导航栏周围的边框，我无法将其删除？我尝试搜索错误，但没有任何效果。我尝试在 style 标签中将边框设置为 0px 但没有用，边框仍然存在，怎么办？请帮助我并提前致谢

代码在这里：

<!DOCTYPE html>
<html>
<head>
<style>
#nav {
  overflow: hidden;
  background-color: #282e30;
  border: 0px;
}

#nav a {
  float: left;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border: 0px;
}

#nav a.active {
    background-color: #286a82;
    color: white;
    border: 0px;
}
</style>
</head>
<body>

<div id="nav">
  <a class="active" href="/home.html">Home</a>
  <a href="/contact.html">Contact us!</a>
  <a href="/about.html">About!</a>
</div>

</body>
</html>

Answer 1

您的代码中不需要 border: 0px;，它不是导航栏周围的边框，而是 HTML 中 body 元素的边距。默认情况下，<body> 标签有一个小边距，使它看起来像是有一个边框。尝试在您的代码中添加 body{margin:0px;}，它应该可以工作。像这样：

<style>
body {
  margin: 0px;
}
#nav {
  overflow: hidden;
  background-color: #282e30;
}

#nav a {
  float: left;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#nav a.active {
    background-color: #286a82;
    color: white;
}
</style>

导航栏周围有边框，无法删除

navbar has border around it and it can't be removed

html

css

nav