如何消除div与header间的多余空白？背景设为灰色仍存在

问题根源 #

1. CSS语法遗漏：你的CSS代码里，.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before 这个选择器的代码块没闭合，直接把.div1的样式嵌套进去了，导致.div1的部分样式无法正常解析。
2. 浏览器默认边距：浏览器默认会给<body>标签添加8px的margin，这也会在页面顶部产生空白。
3. div1的顶部间距设置：当前.div1设置了margin-top: 5vh，这本身就会在header和div1之间拉开距离。

解决步骤 #

1. 补全CSS的闭合大括号 #

把遗漏的大括号补上，让.div1的样式脱离嵌套，恢复正常作用范围：

/* 补上这个闭合大括号，结束之前的选择器代码块 */
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 修改div1的顶部margin为0，消除间距 */
.div1 {
  margin-top: 0;
  margin-bottom: 2.5vh;
  display: flex;
  background-color: rgb(243, 243, 243);
  flex-wrap: wrap;
  gap: 2%;
  justify-content: space-between;
  height: 100vh;
  padding-left: 2%;
  padding-right: 2%;
}

2. 清除浏览器默认的全局边距 #

在CSS最开头添加全局样式，清除默认的边距和内边距，避免浏览器自带样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 验证效果 #

完成以上两步后，header和div1之间的空白应该就完全消除了。如果后续需要给header添加固定定位（header-fixed类），再单独调整下方元素的位置即可。

完整修复后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
  height: 8.5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: rgb(243, 243, 243);
  z-index: 1000;
}

.header-fixed {
  position: fixed;
}

.shadow {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .6);
}

.header .logo {
  margin-left: 2vh;
  font-size: 1.5em;
  text-decoration: none;
  color: black;
}

.header ul {
  margin-left: 2vh;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header li {
  margin-right: 20px;
}

.header li:last-child {
  margin-right: 0;
}

.header li a {
  text-decoration: none;
  color: black;
  padding: 10px;
  border-radius: 5px;
}

.header li a:hover {
  background-color: #f4f4f4;
}

.header .logo {
  font-size: 2em;
  text-decoration: none;
  color: black;
}

/* menu */
.header .menu {
  top: 0;
  position: sticky;
  width: auto;
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  margin-right: 3vh;
}

/* menu icon */
.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 28px;
  padding-left: 5%;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1000;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */
.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
} /* 补全闭合大括号 */

.div1 {
  margin-top: 0; /* 移除顶部间距 */
  margin-bottom: 2.5vh;
  display: flex;
  background-color: rgb(243, 243, 243);
  flex-wrap: wrap;
  gap: 2%;
  justify-content: space-between;
  height: 100vh;
  padding-left: 2%;
  padding-right: 2%;
}

.picture-container {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 3vh;
  flex: 1;
  min-width: calc(50% - 2%);
  height: 80%;
  overflow: hidden;
}

.img-container {
  flex-grow: 1;
  overflow: hidden;
  background-color: #fff;
}

.img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease-in-out;
}

.footer {
  background-color: white;
  flex-shrink: 0;
  height: 13%;
  display: flex;
  align-items: center;
}

.footer h3 {
  font-size: 24px;
  color: #000;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 50px;
}

内容的提问来源于stack exchange，提问作者Sami-Can Durademir