网页header头部无法消除顶部及侧边空白边距问题咨询

问题原因 #

头部空白问题由两个浏览器默认特性导致：

1. 所有主流浏览器默认会给<body>标签设置margin: 8px的默认样式，这是头部两侧和顶部出现空白的核心原因
2. 块级元素存在外边距塌陷规则：直接在<body>下写<h1>时，<h1>的默认顶部外边距会和<body>的顶部外边距合并溢出，导致给.header设置margin-top: 0看起来没有生效

解决方案 #

可任选以下一种方式修复，优先推荐全局样式重置避免后续其他样式出现类似问题：

方案1：全局样式重置（推荐）

在CSS最顶部添加如下重置规则，统一清除所有标签的默认内外边距，同时修正盒模型计算逻辑：

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

原来的.header样式无需修改即可生效。

方案2：针对性修改

不想全局修改的话，单独给<body>和.header添加规则即可：

body {
  margin: 0;
}
.header {
  /* 原有样式保留，新增规则：除底部外其余外边距设置为0 */
  margin: 0 0 2.5rem 0;
}

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