如何消除header类元素周围空白，实现背景色完全覆盖？

嘿，这个问题我太熟了！你看到的那些空白，基本都是浏览器给元素加的默认margin/padding搞的鬼，咱们一步步来搞定它：

1. 先清除body的默认边距 #

浏览器默认会给<body>标签设置8px左右的margin，这就是header周围最外层空白的主要来源。直接在CSS里加上：

body {
  margin: 0;
  padding: 0;
}

2. 处理h1的默认margin #

<h1>标签本身也有上下默认margin，会让header内部和h1之间出现空白，导致红色背景看起来没铺满。给header里的h1重置margin：

.header h1 {
  margin: 0;
}

3. 完整示例代码 #

把这些调整后，你的代码应该变成这样：

<div class="header">
  <h1>some stuff</h1>
</div>

body {
  margin: 0;
  padding: 0;
}

.header {
  background-color: red;
  padding: 40px;
}

.header h1 {
  margin: 0;
}

可选：全局重置（适合复杂布局） #

如果你的页面还有其他元素也受默认样式影响，可以用全局选择器一次性重置所有元素的默认边距，同时加上box-sizing让布局更可控：

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

这样就不用一个个元素去调整默认样式了，不过要注意全局重置会影响所有元素，适合一开始就规划好的项目。

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