只有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 发生了合并。
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 
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 collapse与margin collapse区别解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/961355.html
微信扫一扫 
支付宝扫一扫 
