菜鸟教程
教程 css tutorial

外边距合并

在 CSS 中，当两个块级元素垂直相邻时，它们的外边距（margin）可能会发生合并（margin collapsing），只取较大的外边距值，而不是相加。

1. 外边距合并示例

css 
p {
  margin-top: 30px;
  margin-bottom: 20px;
}
div {
  margin-top: 40px;
  margin-bottom: 10px;
}

当 <p> 和 <div> 竖直相邻时，它们之间的间距不会是 20px + 40px = 60px，而是 40px（较大值）。

2. 外边距合并的条件

  • 必须是垂直方向相邻的块级元素。
  • 中间没有边框、内边距或内容阻止合并。
  • 父元素和第一个子元素的上外边距可能合并，类似的下外边距也可能合并。

3. 如何避免合并

  • 给父元素设置边框、内边距或 overflow 属性。
  • 使用 padding 替代 margin。
  • 改变元素的显示类型。

外边距合并示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>外边距合并示例</title>
  <style>
    .box1 {
      background-color: #ffccbc;
      margin-bottom: 30px;
      padding: 10px;
      border: 1px solid #ff5722;
    }
    .box2 {
      background-color: #ffe0b2;
      margin-top: 50px;
      padding: 10px;
      border: 1px solid #ff9800;
    }
    .container {
      border: 1px solid #333;
      padding: 10px; /* 防止外边距合并 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1">盒子 1，底部外边距 30px</div>
    <div class="box2">盒子 2，顶部外边距 50px</div>
    <p>实际间距为 50px（较大值），而非 80px</p>
  </div>
</body>
</html>

相关内容