在CSS中，当两个或多个垂直相邻的块级元素（如<div>）的margin相遇时，它们不会叠加成两个margin的和，而是会取两个margin中的较大值，这种现象被称为“margin重叠”（margin collapsing）。这种机制在布局中有时是有用的，但也可能导致不期望的布局效果。
要解决margin重叠问题，有几种方法：
1. 使用边框（border）或内边距（padding）
给其中一个元素添加边框或内边距可以阻止margin重叠。
<div class="box1">Box 1</div>
<div class="box2">Box 2</div> <style>
.box1, .box2 { margin-bottom: 20px; background-color: lightblue;
} .box2 { /* 添加边框或内边距 */ border-top: 1px solid transparent; /* 透明边框 */ /* 或者 */ /* padding-top: 1px; */
}
</style>2. 使用overflow属性
给父元素设置overflow属性（除了visible以外的值，如auto、hidden或scroll）可以防止子元素的margin重叠。
<div class="container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div>
</div> <style>
.container { overflow: auto; /* 阻止子元素margin重叠 */
} .box1, .box2 { margin-bottom: 20px; background-color: lightblue;
}
</style>3. 使用浮动（float）
浮动元素不会与其相邻元素发生margin重叠。
<div class="box1">Box 1</div>
<div class="box2 float">Box 2</div> <style>
.box1, .box2 { margin-bottom: 20px; background-color: lightblue;
} .float { float: left; /* 浮动元素 */ width: 100%; /* 如果需要占满整行 */
} /* 清除浮动，如果需要 */
.container::after { content: ""; display: table; clear: both;
}
</style>4. 使用Flexbox或Grid布局
Flexbox和Grid布局中的项目不会经历传统的margin重叠。
<div class="container flex"> <div class="box1">Box 1</div> <div class="box2">Box 2</div>
</div> <style>
.flex { display: flex; flex-direction: column; /* 垂直排列 */
} .box1, .box2 { margin-bottom: 20px; background-color: lightblue;
} /* 对于Grid */
/*
.container { display: grid;
} .box1, .box2 { grid-row: auto; /* 或具体行号 */ margin-bottom: 20px; background-color: lightblue;
}
*/
</style>每种方法都有其适用场景，你可以根据具体需求选择最合适的方法。