没有什么比应用一种样式但它没有按预期工作更令人沮丧的了。边距塌陷是一种导致意想不到的造型结果的现象。那么,什么是折叠边距以及它如何影响 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; */ }
.parent { overflow: hidden; }
.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; }
.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; }
了解边距折叠可以极大地有助于网页布局中一致且预期的间距,特别是在使用块级元素时。值得注意的是,内联元素(例如 、、 等)通常不受边距折叠的影响,因为与块级元素相比,它们在生成垂直边距方面具有独特的行为。边距折叠主要对块级元素(例如 、 等)带来挑战,因为它们可能具有相互交互的垂直边距。
参考
以上是CSS 中的折叠边距:初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章!