页面顶部与导航栏之间存在微小间隙，该如何修复？

根因 #

顶部间隙来自浏览器ul元素的默认样式，绝大多数浏览器会给无序列表默认添加上下外边距，你的代码中没有重置.nav-content的margin属性，默认的上外边距撑开了头部容器，所以就算移除logo间隙也仍然存在。

修复步骤 #

1. 先重置.nav-content的默认内外边距和列表样式，在CSS中添加如下规则：

.nav-content {
  margin: 0;
  padding: 0;
  list-style: none;
}

2. 如果修改后仍有残留的微小间隙，可给header添加font-size: 0消除行高带来的空白，再单独给导航文本设置字体大小即可：

/* 修改原有header规则，新增font-size: 0 */
header {
  margin-top: 0;
  padding-top: 0;
  overflow: hidden;
  width: 100%;
  font-size: 0;
  -webkit-box-shadow: 0px 10px 13px -7px #6b6b6b, 0px 7px 26px -6px rgba(0, 0, 0, 0);
  box-shadow: 0px 10px 13px -7px #5a5a5a, 0px 7px 26px -6px rgba(0, 0, 0, 0);
}

/* 修改原有.nav-link规则，新增font-size属性，大小按需调整 */
.nav-link {
  text-decoration: none;
  font-weight: 600;
  color: #000;
  font-size: 16px;
}

内容的提问来源于stack exchange，提问作者Anđelo Motika