CSS盒模型：padding与margin塌陷区别

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS盒模型：padding与margin塌陷区别详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

只有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 则用于内部留白，逻辑上不应合并

基本上就这些。理解这一点有助于更好地控制元素间的间距，避免布局意外。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS盒模型：padding与margin塌陷区别》文章吧，也可关注golang学习网公众号了解相关技术文章。