相邻块的垂直外边距合并

第 9 课 7 / 25 ｜编码：L09-11

核心知识

相邻块的垂直外边距合并

普通文档流中，上下相邻的两个块，其接触的垂直外边距可能合并。

.first {
  margin: 0 0 30px;
}
.second {
  margin: 20px 0 0;
}

<div class="first">分享会：周三下午</div>
<div class="second">地点：A208</div>

两个正外边距：取较大值

分享会：周三下午

地点：A208

本例边框间距：max(30, 20) = 30px

margin: 上右下左；三值写法为“上、左右、下”。

本例两个块上下紧邻，外边距相接；它们各自的边框不会阻止这里的合并。

补充边界：哪些情况不能直接套用？

水平方向的外边距不按这个规则合并；Flex 或 Grid 项目之间也不发生这种外边距合并。父子之间以及空块也可能发生合并，需要另外检查条件。

若包含负外边距，不能只取较大值。本课先掌握两个正外边距的情况。

展开完整代码与运行演示

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄梅戏分享会</title>
  <style>
    .first {
      margin: 0 0 30px;
    }
    .second {
      margin: 20px 0 0;
    }
    .first, .second {
      border: 2px solid teal;
      padding: 8px;
    }
  </style>
</head>
<body>
  <div class="first">分享会：周三下午</div>
  <div class="second">地点：A208</div>
</body>
</html>