为何<header>标签与页面边框之间存在间隙？

这是浏览器的**外边距折叠（Margin Collapse）**机制导致的。浏览器默认会给<h1>这类标题元素设置margin值，当子元素的上外边距和父元素的上边界直接相邻时，两者的外边距会合并成一个，最终这个间距会体现在父元素<header>和页面顶部之间——你只给<header>设置了padding和margin为0，但没处理<h1>自带的默认margin，所以间隙依然存在。

下面是几种可行的解决方式：

• 直接清除<h1>的默认外边距：

  #homeHDR {
    background-color: black;
    margin: 0;
    padding: 0;
  }
  #homeHDR h1 {
    margin: 0; /* 关键：去掉h1的默认外边距 */
  }
  

• 给<header>触发BFC（块级格式化上下文），阻止外边距折叠：
  可以通过添加overflow: hidden或者display: flow-root实现，后者是专门用来创建BFC且无副作用的属性：

  #homeHDR {
    background-color: black;
    margin: 0;
    padding: 0;
    display: flow-root; /* 或者 overflow: hidden; */
  }
  

• 给<header>加一个极小的内边距，隔开子元素的外边距：

  #homeHDR {
    background-color: black;
    margin: 0;
    padding-top: 1px; /* 用内边距阻断外边距折叠 */
  }
  

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