HTML/CSS导航栏背景色问题：如何消除导航栏周边的非黑色背景

你遇到的问题是浏览器默认给body元素添加了margin，导致导航栏（即使设置了黑色背景）和页面边缘之间存在空隙，从而露出了html标签设置的#111背景色。下面是具体的修复方法：

核心修复步骤 #

• 给body元素添加样式，重置默认的margin和padding：

  body {
    margin: 0;
    padding: 0;
    background-color: #111; /* 把html的背景色移到body，统一管理更规范 */
  }
  

• 同时可以移除html标签上的内联样式，避免重复设置背景色。

修改后的完整代码 #

这里是调整后的代码，已经修复了空隙问题，同时优化了部分样式的冗余：

<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
  <style type="text/css">
    /* 重置浏览器默认样式，解决边距问题 */
    body {
      margin: 0;
      padding: 0;
      background-color: #111;
    }

    h6 {
      font-weight: light;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: black;
      position: sticky;
      top: 0; /* 补充top属性让sticky定位正常生效 */
    }

    ul li img {
      width: 2vw;
      height: 2vw;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: grey;
      text-align: center;
      padding: .4vw .5vw;
      text-decoration: none;
    }

    li a:hover {
      background-color: #111;
    }

    #navigation-bar {
      background-color: black;
      color: grey;
      font-weight: bold;
      font-family: monospace;
      font-size: 1.2vw;
    }

    #main-page {
      background-color: #111;
      color: white;
    }

    .header {
      background-color: #111;
      color: white;
      text-align: center;
      font-weight: bold;
      font-family: cursive;
      font-size: 2.5vw;
    }

    .sub-header {
      background-color: #111;
      color: white;
      text-align: center;
      font-weight: normal;
      font-family: cursive;
      font-size: 1.7vw;
    }

    .sub-header th {
      padding-left: 1vw;
      padding-right: 1vw;
    }

    .sub-header-two {
      background-color: #111;
      color: white;
      text-align: center;
      font-weight: normal;
      font-family: cursive;
      font-size: 1.1vw;
    }

    #copyright {
      background-color: #111;
      color: white;
      text-align: left;
      position: absolute;
      bottom: .5vw;
      font-weight: light;
      font-family: sans;
      font-size: .7vw;
    }
  </style>
</head>
<body>
  <div id="navigation-bar">
    <ul>
      <li><img src="https://cdn.discordapp.com/avatars/471009727602491405/1205d2f887ec380308940bb54b593d60.webp?size=128" height="50px" width="50px"></li>
      <li><a href="/home" title="Home">Home</a></li>
      <li><a href="/about" title="About Me">About Me</a></li>
      <li><a href="/languages" title="Languages">Languages</a></li>
      <li><a href="/work" title="Previous Work">Previous Work</a></li>
      <li style="float: right;"><a href="https://puginarug.com" title="An Amazing Website">An Amazing Website</a></li>
    </ul>
  </div>
  <div id="main-page">
    <h1 class="header">Welcome to my Portfolio</h1>
    <table align="center">
      <tr class="sub-header">
        <th>What can I do here?</th>
        <th>How can I get in contact?</th>
        <th>Where can I support?</th>
      </tr>
      <tr class="sub-header-two">
        <td><br><br>Here you can look around, or learn<br>about me! You can find info like<br>what languages I know, my previous<br>work, etc.</td>
        <td>You can get in contact with me on<br>discord @ killrebeest#4357</td>
        <td>Just Support by supporting me, like<br>a supporter</td>
      </tr>
    </table>
  </div>
  <div id="copyright"> (C)Copyright 2022 All Rights Reserved </div>
</body>
</html>

额外优化说明 #

• 给ul添加了top: 0，确保position: sticky能正常生效（sticky定位必须指定top/right/bottom/left中的一个属性）。
• 重置body的margin和padding是前端开发的基础操作，能避免很多浏览器默认样式带来的布局冲突。

内容的提问来源于stack exchange，提问作者killrebeest