CSS margin 折叠现象的实际代码示例
下面是展示 CSS margin 折叠现象的实际代码示例，包含了几种常见的 margin 折叠场景：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Margin Collapse Example</title><style>/* 基础样式 */.container {width: 400px;margin: 20px auto;border: 1px solid #ccc;padding: 10px;}.box {height: 100px;background-color: #f0f0f0;border: 1px solid #999;text-align: center;line-height: 100px;}/* 1. 相邻兄弟元素的margin折叠 */.sibling1 {margin-bottom: 30px;}.sibling2 {margin-top: 20px;/* 实际间距是30px（取较大值），而不是50px */}/* 2. 父子元素的margin折叠（父元素没有padding/border隔离） */.parent {background-color: #e0e0e0;/* 取消注释可阻止折叠：padding: 1px; 或 border: 1px solid transparent;*/}.child {margin-top: 20px;margin-bottom: 20px;/* 子元素的margin会“溢出”到父元素外 */}/* 3. 空元素的margin折叠 */.empty-box {margin-top: 20px;margin-bottom: 20px;/* 上下margin会折叠成一个20px的margin */}/* 4. 负margin的折叠情况 */.negative-sibling1 {margin-bottom: 30px;}.negative-sibling2 {margin-top: -10px;/* 实际间距是20px（30px + (-10px)） */}</style>
</head>
<body><h2>1. 相邻兄弟元素的margin折叠</h2><div class="container"><div class="box sibling1">下方margin: 30px</div><div class="box sibling2">上方margin: 20px</div><p>实际间距是30px（取较大值）</p></div><h2>2. 父子元素的margin折叠</h2><div class="container"><div class="parent"><div class="box child">子元素上下margin: 20px</div></div><p>子元素的margin会溢出到父元素外（父元素无padding/border时）</p></div><h2>3. 空元素的margin折叠</h2><div class="container"><div class="box">上方元素</div><div class="empty-box"></div> <!-- 空元素 --><div class="box">下方元素</div><p>空元素的上下margin会折叠成一个margin</p></div><h2>4. 包含负margin的折叠</h2><div class="container"><div class="box negative-sibling1">下方margin: 30px</div><div class="box negative-sibling2">上方margin: -10px</div><p>实际间距是20px（30px + (-10px)）</p></div>
</body>
</html>
代码说明：
- 相邻兄弟元素折叠：两个相邻元素的上下margin会合并，取较大的那个值（示例中30px覆盖20px）
- 父子元素折叠：当父元素没有padding、border或inline内容隔离时，子元素的margin会“溢出”到父元素外部
- 空元素折叠：没有内容、padding和border的空元素，其上下margin会合并为一个
- 负margin折叠：包含负margin时，最终间距为正margin与负margin的代数和
如何阻止margin折叠：
- 给父元素添加padding或border
- 使用BFC（块级格式化上下文），如给元素添加
overflow: auto、display: flex等 - 浮动元素（float不为none）不会产生margin折叠
- 绝对定位元素的margin不会与其他元素折叠
运行这段代码可以直观看到各种margin折叠现象，以及它们的实际表现效果。