如何消除导航栏与区块间空白及hover选择器底部深色线条？

问题1：导航栏与第一个section之间的白色细线 #

导航栏所在的section与下方#Who-Am-I section之间出现白色空白，排查发现空白为body背景色，已清除body的margin和padding但问题依旧。

问题2：导航链接hover时底部的深色细线 #

为导航链接设置hover灰色背景后，底部仍残留深色细线，排查li、ul、a的占用空间未找到原因。

项目HTML代码 #

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Double Team Cooking</title>
    <link rel='stylesheet' href='styles.css'>
  </head>
  <body>
    <section id="welcome">
      <nav id='navbar'>
        <ul>
          <li><a href="#whodis">Who Am I?</a></li>
          <li><a href="#Projectos">My Projects</a></li>
          <li><a href="#hola">Contact</a></li>
        </ul>
      </nav>
    </section>
      
      
    <section id='Who-Am-I'>
      <h2 id='whodis'>Who Am I?</h2>
      <p> Hey, I'm Pedro.</p>
      <p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
    </section>

    <section id='Projects'>
      <h2 id='Projectos' class="project-title">My Projects</h2>
      <p>So, what am I working on?</p>
      <div id="electriccar"></div>
      <div id="website"></div>
      <div id="TWR"></div>
    </section>

    <section id="Contact">
      <h2 id="hola">Contact Me</h2>
      <p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
    </section>
    
  </body>
</html>

项目CSS代码 #

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  width: 100%;
  padding: 0px;
  margin: 0px;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: rgb(24,24,24);
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  padding-left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  align-items: center;
  
}

nav li {
  display: inline-block;
}

li a {
  text-decoration: none;
  color: white;
  padding: 10px;
  
}

li a:hover {
  background-color: rgb(64,64,64);

}

#Who-Am-I {
  height: 100%;
  background-color: rgba(0,30,0,0.8);
}

解决方案 #

针对问题1：

问题根源是浏览器默认给section元素添加了margin，#welcome的底部margin和#Who-Am-I的顶部margin发生外边距折叠，加上#welcome未设置背景色，空白区域显示body背景。

修改CSS，给#welcome清除默认margin并设置与nav一致的背景色：

#welcome {
  margin: 0;
  background-color: rgb(24,24,24);
}

针对问题2：

a标签默认是inline元素，垂直对齐方式为基线，会导致底部留有微小间隙；同时当前a的高度未填满nav的高度，hover背景无法覆盖整个导航栏区域。

修改li a的样式，将其设置为inline-block并填充父元素高度：

li a {
  text-decoration: none;
  color: white;
  padding: 10px;
  display: inline-block;
  height: 100%;
}

这样hover时背景色会完全覆盖导航栏的高度，底部间隙也会消失。

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