HTML背景与#headerExperience背景出现间隙，有什么可行解决方案？

间隙产生原因 #

间隙由两个浏览器默认样式和CSS规则导致：

1. 浏览器默认给body元素设置了8px左右的外边距，你未在HTML中显式声明body标签时，浏览器会自动生成body并把div嵌套在内，默认边距就会撑出html和#headerExperience之间的间隙
2. #headerExperience内的<h1>标签默认带有上下外边距，触发CSS外边距塌陷规则，子元素的外边距会溢出到父元素外，进一步放大间隙

可行解决方法 #

• 第一步：添加全局样式重置，消除所有浏览器默认边距影响，在CSS代码最开头添加如下代码：

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

• 第二步：修复外边距塌陷问题，二选一即可：
  • 方案1：给#headerExperience添加overflow: hidden属性，触发BFC规则阻止子元素边距溢出
  • 方案2：给#headerExperience添加1px以上的顶部padding/border，阻断塌陷传递，不会影响原有布局效果

修改后完整代码示例 #

CSS代码

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

html {
    background-color: #9bf6ff;
    font-family: 'Oswald', sans-serif;
    width: auto;
}

#headerExperience {
    line-height: 200px;
    font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    color: khaki;
    background-color: steelblue;
    background-image: url("images/Experience background imagee.jpg") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    /* 修复塌陷的属性 */
    overflow: hidden;
}

优化后HTML代码（符合W3C规范，避免浏览器自动补全标签导致的异常）

<html>
<head>
  <title>Experience页面</title>
  <!-- 引入你的CSS样式 -->
</head>
<body>
  <!--Header-->
  <div id="headerExperience">
    <h1>Experience</h1>
  </div>
</body>
</html>

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