边距重叠是块级元素垂直外边距合并的现象，导致间距不符合预期。1、标准文档流中相邻块级元素的上下外边距会合并为较大值。2、父子元素间若无border、padding或overflow隔离，也会发生重叠。3、空元素无内容、边框或内边距时自身上下外边距合并。4、可通过使用padding替代margin、创建BFC（如display: flow-root）、添加min-height或透明边框等方法防止重叠，确保布局准确。
如果您在设计网页布局时发现元素之间的间距不符合预期，可能是由于CSS中的边距重叠现象导致的。这种现象通常出现在块级元素的垂直外边距上，浏览器会将相邻元素的上下外边距合并为一个单一的外边距。
本文运行环境：MacBook Pro，macOS Sonoma
一、理解边距重叠的基本原理
边距重叠指的是两个垂直相邻的块级元素在文档流中相遇时，它们各自的margin-top和margin-bottom不会简单相加，而是合并成一个更大的外边距。这个合并后的值等于两者中较大的那个外边距值。这种情况主要发生在普通文档流中的块级盒子之间，并且只针对垂直方向上的外边距。
1、确认涉及的元素是块级元素并处于标准文档流中。
立即学习“前端免费学习笔记（深入）”；
2、检查这些元素是否没有被浮动或定位脱离文档流。
3、观察它们的上下外边距设置情况，判断是否存在margin collapsing现象。
二、父子元素间的边距重叠
当父元素与其第一个或最后一个子元素共享垂直外边距时，也可能发生边距重叠。此时，即使父元素设置了padding或border，若未正确隔离内外边距，则仍可能出现该问题。
1、查看父元素是否有非零的 border 或 padding来阻止边距合并。
2、尝试为父元素添加 overflow 属性，如 overflow: hidden 或 overflow: auto。
3、使用 flex 或 grid 布局模型替代传统块布局，从根本上避免此类问题。
三、空元素引发的边距重叠
当一个块级元素内部没有任何内容、内边距或边框时，其自身的上下外边距也会发生合并。这意味着该元素的高度被视为零，而其外边距直接与外部元素的外边距交互。
1、检查目标元素是否为空白容器且无实际内容填充。
2、为其增加最小高度（min-height）以确保视觉分离。
3、插入透明边框（例如 border: 1px solid transparent）或微小内边距（padding: 1px）打破合并条件。
四、防止边距重叠的技术手段
为了避免不必要的布局错乱，开发者可以采取多种策略主动规避边距重叠的影响。选择合适的方法取决于具体的设计需求和现有结构限制。
1、统一采用 padding 而非 margin 控制组件间距离。
2、应用 BFC（块格式化上下文）机制，通过设置 display: flow-root 或其他触发方式隔离渲染区域。
3、使用 CSS 自定义属性定义间距变量，集中管理所有间距逻辑，减少意外叠加的可能性。
