外边距重叠（Margin Collapse）是指相邻元素的外边距会合并成一个外边距，而不是简单相加。
基本概念
什么是外边距重叠？
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>.box1 {
margin-bottom: 30px;
background: red;
}
.box2 {
margin-top: 20px;
background: blue;
}
/* 结果：两个盒子之间的距离是30px，不是50px */
/* 因为30px和20px重叠了，取较大值30px */外边距重叠的类型
1. 相邻兄弟元素
<div class="sibling1">兄弟元素1</div>
<div class="sibling2">兄弟元素2</div>.sibling1 {
margin-bottom: 40px;
}
.sibling2 {
margin-top: 25px;
}
/* 实际间距：40px（取较大值） */2. 父子元素
<div class="parent">
<div class="child">子元素</div>
</div>.parent {
margin-top: 50px;
/* 注意：没有padding-top和border-top */
}
.child {
margin-top: 30px;
}
/* 结果：父元素的margin-top变成50px */
/* 子元素的margin-top和父元素的margin-top重叠 */3. 空元素
<div class="empty"></div>
<div class="next">下一个元素</div>.empty {
margin-top: 20px;
margin-bottom: 30px;
/* 没有内容、padding、border、height */
}
.next {
margin-top: 15px;
}
/* 空元素自身的上下margin重叠：取30px */
/* 然后与下个元素的margin重叠：max(30px, 15px) = 30px */重叠规则
1. 取最大值
/* 正数margin：取最大值 */
.box1 { margin-bottom: 40px; }
.box2 { margin-top: 25px; }
/* 结果：40px */
.box3 { margin-bottom: 60px; }
.box4 { margin-top: 80px; }
/* 结果：80px */2. 正负数计算
/* 一正一负：相加 */
.box1 { margin-bottom: 40px; }
.box2 { margin-top: -15px; }
/* 结果：40px + (-15px) = 25px */
/* 两个负数：取绝对值最大的 */
.box3 { margin-bottom: -30px; }
.box4 { margin-top: -20px; }
/* 结果：-30px */阻止外边距重叠的方法
1. 使用BFC
/* 父子元素重叠 - 给父元素创建BFC */
.parent {
overflow: hidden; /* 创建BFC */
margin-top: 50px;
}
.child {
margin-top: 30px; /* 不再与父元素重叠 */
}2. 添加边框或内边距
/* 阻止父子重叠 */
.parent {
border-top: 1px solid transparent; /* 或 padding-top: 1px; */
margin-top: 50px;
}
.child {
margin-top: 30px; /* 不再重叠 */
}3. 使用其他布局方法
/* 使用flexbox */
.container {
display: flex;
flex-direction: column;
}
.container .item {
margin: 20px 0; /* flex容器内不会重叠 */
}
/* 使用grid */
.grid-container {
display: grid;
gap: 20px; /* 使用gap代替margin */
}实际应用示例
1. 常见问题：标题和段落
<h2>标题</h2>
<p>段落内容</p>h2 {
margin-bottom: 16px;
}
p {
margin-top: 16px;
}
/* 问题：标题和段落之间只有16px，不是32px */
/* 解决方案1：只设置一个方向的margin */
h2 {
margin-bottom: 16px;
}
p {
margin-top: 0; /* 或者删除这行 */
}
/* 解决方案2：使用gap */
.content {
display: flex;
flex-direction: column;
gap: 16px;
}2. 卡片布局问题
<div class="card">
<div class="header">卡片头部</div>
<div class="body">卡片内容</div>
</div>.card {
padding: 20px;
border: 1px solid #ddd;
}
.header {
margin-top: 0; /* 避免与卡片顶部重叠 */
margin-bottom: 15px;
}
.body {
margin-top: 0; /* 避免重叠 */
margin-bottom: 0; /* 避免与卡片底部重叠 */
}3. 列表项间距
<ul class="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>/* 问题做法 */
.list li {
margin-top: 10px;
margin-bottom: 10px; /* 相邻li之间只有10px，不是20px */
}
/* 好的做法 */
.list li + li {
margin-top: 10px; /* 只给非第一个li添加上边距 */
}
/* 或者使用现代方法 */
.list {
display: flex;
flex-direction: column;
gap: 10px;
}调试外边距重叠
1. 使用开发者工具
/* 在Chrome DevTools中 */
/* 1. 选中元素 */
/* 2. 查看Computed面板的盒模型图 */
/* 3. 重叠的margin会显示特殊颜色 */2. 添加调试样式
/* 临时添加背景色观察 */
.debug {
background: rgba(255, 0, 0, 0.1);
border: 1px solid red;
}
/* 观察实际占用空间 */
.debug::before {
content: '';
display: block;
background: rgba(0, 255, 0, 0.1);
height: 1px;
}3. 使用outline观察
.debug-margin {
outline: 2px solid red;
outline-offset: 0;
}最佳实践
1. 统一margin方向
/* 推荐：只使用bottom margin */
h1, h2, h3, p, ul, ol {
margin-top: 0;
margin-bottom: 1rem;
}
/* 最后一个元素不需要bottom margin */
.container > *:last-child {
margin-bottom: 0;
}2. 使用现代布局
/* 使用gap替代margin */
.stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.grid {
display: grid;
gap: 1rem;
}3. 组件化思维
/* 组件内部使用gap或padding */
.card {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* 组件间距使用margin */
.card + .card {
margin-top: 2rem;
}理解外边距重叠有助于避免布局中的意外间距问题，写出更可预测的CSS代码。