如何实现与页面无间距的HTML/CSS导航栏？解决作品集网站间距问题

嘿，我看你在做个人IT职业路径的作品集网站时，遇到了导航栏和页面其余部分有间距的问题——刚好我之前也踩过这个坑！

问题根源 #

你之前尝试调整border、margin、width都没生效，其实问题出在浏览器的默认样式上：大部分浏览器会给<body>标签设置默认的margin值（通常是8px），这个默认边距就是导致导航栏上方出现空隙的原因，和你设置的ul样式无关。

解决方案 #

只需要修改你的CSS代码，给body添加清空默认边距和内边距的属性，就能让导航栏紧紧贴住页面顶部：

修改后的完整CSS代码

body { 
  background-color: #B31854; 
  margin: 0;  /* 移除body默认的上下左右边距 */
  padding: 0; /* 清空默认内边距，避免其他潜在间距问题 */
}
ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: #900C3F;
}
li { float: left; }
li a { 
  display: block; 
  color: white; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
}
li a:hover { background-color: #740A33; }
h1 { 
  font-family: Schluber; 
  color: #D7BDE2; 
  margin-top: 20px; /* 可自定义标题与导航栏的间距 */
}
p { 
  color: #D7BDE2; 
  width: 300px; 
  margin: auto; 
}

额外优化提示 #

如果想要让导航栏和下方标题的间距更符合你的设计，可以调整h1的margin-top值；如果需要导航栏在页面滚动时固定在顶部，还可以给ul添加position: fixed; width: 100%;属性，不过这是进阶需求啦。

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