CSS上下margin重叠问题：为何合并值后仅设置margin-top即可？

问题原因 #

你遇到的是CSS标准里的垂直外边距重叠规则：

• 常规文档流中，两个上下相邻的块级元素，上方元素的下外边距（margin-bottom）和下方元素的上外边距（margin-top）会发生合并，最终的实际间距取两个边距中更大的那个，不会直接相加。
• 你给标题设置15px的margin-bottom，副标题设置10px的margin-top，两者重叠后实际间距只有15px，自然达不到25px的预期效果。

解决方法 #

针对这个场景推荐以下两种简单方案：

方案1：仅设置单侧外边距 #

直接只给其中一个元素设置总间距大小的外边距，完全避开重叠问题，也是最常用的写法：

#content .section-heading {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 4px;
}

#content .section-sub-heading {
  font-size: 15px;
  margin-top: 25px;
}

也可以反过来只给标题设置margin-bottom: 25px，效果一致。

方案2：用内边距替代其中一侧外边距 #

如果你需要保留两边分别设置的逻辑，就把其中一侧的margin改成padding，内边距不会和外边距发生重叠：

#content .section-heading {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 4px;
  /* 把原来的margin-bottom改成padding-bottom */
  padding-bottom: 15px;
}

#content .section-sub-heading {
  font-size: 15px;
  margin-top: 10px;
}

这样总间距就是15px+10px=25px，符合预期。

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