已移除margin和padding，header上方仍存在空白问题求助

嘿，我来帮你搞定这个header顶部留空白的问题！你已经设置了html和body的margin、padding为0，但还是有空白，大概率是h1元素自带的margin-top引发了外边距塌陷——块级元素的上下外边距会和父元素的外边距合并，所以h1的margin-top会“跑”到header外面，看起来就像是header上方有空白。

这里给你几个靠谱的解决办法：

• 给header触发BFC（块级格式化上下文），阻止外边距合并，比如添加：

  header {
    background-color: #FFFFFF;
    overflow: hidden; /* 或者用 display: flow-root; 更现代的写法 */
  }
  

• 直接清除h1的顶部外边距：

  .name h1 {
    margin-top: 0;
  }
  

• 给header加个极小的顶部内边距，打破外边距合并：

  header {
    background-color: #FFFFFF;
    padding-top: 1px;
  }
  

修改后的完整代码示例（以清除h1 margin-top为例）：

<style>
html, body { 
  background-color: #7fffd4; 
  margin: 0; 
  padding: 0; 
}
header { 
  background-color: #FFFFFF; 
}
.name h1 {
  margin-top: 0;
  padding: 0;
}
</style>
<header>
  <div class="name">
    <h1>WH...的内容</h1>
  </div>
</header>

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