CSS标题上下外边距不一致如何调整？边距问题技术求助

算力阿峰

2026-7-28

问题解决：标题上下外边距不一致的问题

核心原因

你遇到的问题是浏览器默认样式导致的：<h1>标签本身带有默认的margin-bottom值，这个默认边距和.text的margin-top:3rem发生了垂直外边距折叠（相邻元素的垂直外边距会合并为一个，取两者中的较大值），最终导致标题下方的实际间距大于你设置的3rem；而标题上方只有你定义的margin-top:3rem，没有其他默认边距干扰，所以上下间距出现差异。这和你用rem还是em无关，替换单位自然无法解决问题。

解决方案

方案1：清除标题的默认底部外边距

直接给.top-heading添加margin-bottom: 0，消除h1自带的默认底部边距，这样.text的margin-top:3rem就能和标题上方的间距保持一致：

.top-heading {
  font-size: 3rem;
  width: 100%;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 0; /* 新增：移除h1默认底部边距 */
}

.text {
  font-size: 3rem;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 3rem;
}

方案2：全局默认样式重置（更推荐）

在CSS开头添加全局重置代码，消除所有元素的默认内外边距，从根源避免默认样式干扰布局：

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

.top-heading {
  font-size: 3rem;
  width: 100%;
  text-align: center;
  margin-top: 3rem;
}

.text {
  font-size: 3rem;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 3rem;
}