修改contactDiv的margin时lessonDiv位置异常变动求助

你遇到的是CSS中常见的**外边距折叠（Margin Collapse）**问题：当两个垂直相邻的块级元素的外边距相遇时，它们会合并成一个单一的外边距，所以调整#contactDiv的margin会直接影响#lessonDiv的位置。

以下是几种可靠的解决方案：

方案1：触发父容器的BFC（推荐） #

给包含这两个div的父容器添加能触发BFC的属性，最无副作用的是display: flow-root;（现代浏览器均支持），它会创建独立的布局上下文，阻断外边距折叠。

示例代码：

<!-- HTML结构 -->
<div class="parent-container">
  <div id="contactDiv">Contact Content</div>
  <div id="lessonDiv">Lesson Content</div>
</div>

/* CSS修改 */
.parent-container {
  display: flow-root;
}

#contactDiv {
  margin-bottom: 30px; /* 调整此值不再影响lessonDiv */
}

#lessonDiv {
  margin-top: 20px;
}

如果需要兼容旧版浏览器，也可以用以下属性替代display: flow-root;：

• overflow: hidden;（注意可能会裁剪内部溢出内容）
• float: left; width: 100%;（需确保父容器宽度正确）

方案2：用padding替代margin #

如果布局允许，可以将其中一个元素的margin替换为父容器的padding，避免相邻外边距相遇：

.parent-container {
  padding-bottom: 30px; /* 代替contactDiv的margin-bottom */
}

#contactDiv {
  /* 移除margin-bottom */
}

#lessonDiv {
  margin-top: 20px;
}

方案3：在两个div之间添加隔离元素 #

在#contactDiv和#lessonDiv之间插入一个空元素，设置overflow: hidden;来阻断外边距折叠：

<div id="contactDiv">Contact Content</div>
<div class="margin-blocker"></div>
<div id="lessonDiv">Lesson Content</div>

.margin-blocker {
  overflow: hidden;
  height: 0;
}

内容的提问来源于stack exchange，提问作者Michi