介绍
没有什么比应用一种样式但它没有按预期工作更令人沮丧的了。边距塌陷是一种导致意想不到的造型效果的现象。那么，什么是折叠边距以及它如何影响 css 中的边距？
利润崩溃
折叠边距源于css属性边距，它控制元素外部的间距。顾名思义，当相邻元素的边距组合或“折叠”为一个而不是相加时，就会发生折叠边距。这通常发生在同级元素之间或父元素和子元素之间。例如，如果两个同级元素具有边距（一个具有 20 像素的下边距，另一个具有 30 像素的上边距），您可能期望总边距为 50 像素。但是，由于折叠边距，只会应用较大的边距 30px，而较小的边距 20px 将被折叠。
.element1 { margin-bottom: 20px;}.element2 { margin-top: 30px;}
此外，如果父元素缺少内边距或边框，并且其子元素具有上边距，则该边距可能会“折叠”到父元素之外，从而影响父元素的位置。
.parent { margin-top: 0;}.child { margin-top: 20px;}
.child 的 20px 上边距可能会折叠到 .parent 之外，从而将整个父级向下移动 20px。
这可能会让菜鸟开发人员感到困惑（我直到最近才知道这一点），因为最终的间距可能不符合他们的预期。
解决方法
添加内边距或边框：向父元素添加少量内边距或边框将防止边距塌陷。
.parent { padding-top: 1px; /* or border-top: 1px solid transparent; */}
overflow属性的使用：当父级的overflow属性设置为visible以外的任何属性时（例如overflow:hidden;），它可以防止边距折叠。
.parent { overflow: hidden;}
使用 flexbox 或网格布局：这些布局方法通过设计避免了边距折叠问题。
弹性盒示例：
.parent { display: flex; /* flexbox layout */ flex-direction: column; /* stack children vertically */ border: 1px solid #000; /* just for visibility */}.child1, .child2 { margin: 20px 0; /* vertical margins that won't collapse */ background-color: lightblue;}
网格示例
.parent { display: grid; /* grid layout */ grid-template-rows: auto auto; /* define two rows */ border: 1px solid #000; /* just for visibility */ }.child1, .child2 { margin: 20px 0; /* vertical margins */ background-color: lightgreen; }
使用float或inline-block：使子元素浮动或设置为显示：inline-block；还可以防止边距塌陷。然而，我很少再看到浮动，但很高兴知道遗留代码库的情况。
浮动示例：
.parent { border: 1px solid #000; /* just for visibility */ } .child1, .child2 { float: left; /* prevents margin collapsing */ width: 100%; /* full width */ margin: 20px 0; /* vertical margins */ background-color: lightcoral; }
内联块示例
.parent { border: 1px solid #000; /* Just for visibility */}.child1, .child2 { display: inline-block; /* Prevents margin collapsing */ width: 100%; /* Full width */ margin: 20px 0; /* Vertical margins */ background-color: lightyellow;}
结论
了解边距折叠可以极大地有助于网页布局中一致且预期的间距，特别是在使用块级元素时。值得注意的是，内联元素（例如 、、 等）通常不受边距折叠的影响，因为与块级元素相比，它们在生成垂直边距方面具有独特的行为。边距折叠主要对块级元素带来挑战，例如
、
等，因为它们可能具有相互交互的垂直边距。
立即学习“前端免费学习笔记（深入）”；
参考
mdnw3学校
以上就是CSS 中的折叠边距：初学者指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629928.html
微信扫一扫 
支付宝扫一扫 
