CSS/HTML中header与footer DIV顶部出现空白区域相关问题咨询

你遇到的这个空白问题本质是**块级元素父子外边距塌陷（外边距合并）**现象，和DIV有没有定义边框有直接关联，但根本原因是CSS的默认布局规则，和你设置的position: relative无关。

为什么会出现空白 #

块级元素的父子外边距塌陷是CSS的默认规则：当父块元素同时满足以下所有条件时，父元素的顶部外边距会和内部第一个常规流子元素的顶部外边距合并，合并后的外边距会渲染在父元素外部，看起来就像父元素顶部出现了空白：

• 父元素没有设置顶部border
• 父元素没有设置顶部padding
• 父元素没有创建BFC（块级格式化上下文）
• 父元素和子元素之间没有其他内联内容分隔

你的代码里h1、h2都有浏览器默认的上外边距，父容器.header、.footer刚好符合上面的塌陷触发条件，所以子元素的上margin穿透父容器显示成了顶部空白。

你之前的解决方案为什么生效 #

• 给DIV加边框：父元素有了顶部border，直接阻断了外边距合并的规则，子元素的margin就会限制在父容器内部
• 移除内部元素的顶部margin：直接删除了发生合并的margin源头，自然不会出现空白

你设置position: relative没有效果是正常的，这个属性只会调整元素的定位参考系，不会影响外边距合并的规则。

更优雅的通用解决方案 #

除了你已经尝试的两种方法，还有几个不影响布局的常用方案可选：

• 给父元素加1px以内的顶部padding，不会影响视觉效果还能阻断塌陷：

.header, .footer {
  padding-top: 0.1px;
}

• 给父元素设置非visible的overflow属性，创建BFC阻断合并：

.header, .footer {
  overflow: hidden;
}

• 用伪元素在父元素头部插入占位内容分隔父子元素：

.header::before, .footer::before {
  content: "";
  display: table;
}

• 直接重置标题的默认外边距，需要间距改用父元素的padding实现，布局更可控：

h1, h2 {
  margin: 0;
}

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