给h1设置margin-top后容器背景色与页面顶部出现空白如何解决

你遇到的背景色和网页顶部出现空白的问题，本质是外边距折叠（也叫外边距塌陷），这是CSS的默认规则：当父块级元素没有设置上边框、上内边距，也没有触发BFC（块级格式化上下文）时，它和内部第一个子元素的上外边距会合并，最终合并后的外边距会渲染在父元素的外侧，所以你给h1设置的margin-top: 50px并没有作用在h1和父容器.top-container之间，而是跑到了.top-container的外面，就形成了你看到的顶部空白。

两种常用方案都可以解决问题，你可以按需选择： #

方案1：改用padding实现 #

直接删除h1的margin-top: 50px，给父容器.top-container添加上内边距即可，完全不会出现外边距溢出的问题：

.top-container {
  background-color: #E4F9F5;
  padding-top: 50px;
}
h1 {
  font-family: 'Sacramento', cursive;
  font-size: 5.625rem;
  /* 移除原有的margin-top: 50px */
  color: #66BFBF;
}

方案2：保留margin-top写法（适配课程代码逻辑） #

如果想跟着Angela Yu的课程继续用margin-top实现，只要给父容器.top-container添加一个能触发BFC的属性，就能阻止外边距折叠，让h1的上外边距在容器内部生效：

.top-container {
  background-color: #E4F9F5;
  overflow: auto; /* 新增这一行即可，也可以换成overflow: hidden */
}

两种方案的最终视觉效果完全一致。

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