只有margin会发生外边距合并,padding不会;margin collapse指垂直相邻元素的margin合并为较大值,如20px与30px合并为30px,而padding始终累加显示,如20px+30px=50px,二者机制不同。

在CSS布局中,padding collapse 和 margin collapse 是两个常被误解的概念。实际上,只有 margin 会发生“collapse”(外边距合并),而 padding 并不会发生类似行为。下面详细解析两者的区别。
什么是 Margin Collapse(外边距合并)?
Margin collapse 是指在特定情况下,两个垂直方向上的相邻元素的 margin 会合并成一个单一的 margin,其大小为两者中的较大值。
常见发生场景包括:
- 相邻兄弟元素之间的垂直 margin 合并
- 父元素与第一个或最后一个子元素之间的 margin 合并(当没有 border、padding 阻隔时)
- 空块级元素的上下 margin 合并
例如:
立即学习“前端免费学习笔记(深入)”;
这两个 div 之间的实际间距是 30px,而不是 50px,因为 margin 发生了合并。
Padding 不会发生 Collapse
CSS 中不存在 “padding collapse” 这个机制。相邻元素的 padding 不会合并,也不会相互影响。
padding 是元素内容区域到边框之间的空间,它始终独立存在。即使两个元素上下紧邻,它们的 padding 也会各自保留,叠加显示。
比如:
此时 A 和 B 之间的空白距离是 20px + 30px = 50px,padding 是累加的,不会合并。
关键区别总结
- margin collapse 存在:只发生在块级元素的垂直方向,且在普通文档流中
- padding collapse 不存在:padding 永远不会合并,始终独立作用
- border、padding 或 inline 元素的存在可以阻止 margin collapse
- margin collapse 是为了减少垂直方向上不必要的空白;padding 则用于内部留白,逻辑上不应合并
基本上就这些。理解这一点有助于更好地控制元素间的间距,避免布局意外。










