父子元素可能因无阻隔发生margin折叠，导致布局异常；通过添加border、padding或创建BFC可阻止该现象，确保子元素margin在父元素内部生效。
在CSS中，外边距折叠（margin collapse） 是指两个垂直方向的margin相遇时会合并成一个margin的现象。很多人知道相邻兄弟元素之间会发生margin折叠，但对父子元素之间的margin折叠理解不够清晰，容易引发布局问题。
父子元素也可能发生margin折叠
当父元素没有“阻挡”子元素margin传播的条件时，子元素的上或下margin可能会与父元素的margin发生折叠。这种情况通常出现在：
父元素没有border、padding、inline content等阻断因素子元素的margin-top与父元素的margin-top“接触”父元素未创建BFC（块级格式化上下文）
此时，子元素的margin-top并不会真正“推开”父元素内部，而是与父元素自身的margin-top合并，导致父元素整体向下移动——看起来像是父元素的margin变大了，而子元素没被推下去。
如何避免父子margin折叠
要阻止这种意外的折叠行为，可以通过以下几种方式“隔离”父子margin：
立即学习“前端免费学习笔记（深入）”；
给父元素添加 border 或 padding：哪怕加 border: 1px solid transparent 都行，只要有border或padding，就能阻断折叠让父元素创建BFC：通过设置 overflow: hidden、display: flow-root 等属性，使父元素成为独立的布局环境使用 padding 代替 margin：如果目的是留白，考虑用父元素的padding来实现，更可控将子元素变为 inline-block 元素：非块级元素不会参与margin折叠
实际例子说明
假设你有如下结构：
Seede AI
AI 驱动的设计工具
586 查看详情 
内容
如果CSS是：
.parent { margin-top: 20px; background: #eee;}.child { margin-top: 30px; height: 50px; background: lightblue;}
你会发现 .child 并没有在父元素内向下推30px，反而整个 .parent 向下移动了30px（取两者margin最大值），这就是典型的父子margin折叠。
解决方法比如：
.parent { margin-top: 20px; overflow: hidden; /* 触发BFC */ background: #eee;}
这样 .child 的 margin-top 就会在父元素内部生效，不再与父元素折叠。
基本上就这些。理解父子间的margin折叠关键在于意识到“没有阻隔就会合并”，只要稍加干预就能控制布局行为。
以上就是css margin collapse与父子元素关系的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1069890.html
微信扫一扫 
支付宝扫一扫 
