、

等元素。

典型表现：你给一个

设了 margin-bottom: 20px，下一个

设了 margin-top: 30px，结果两者间距不是 50px，而是 30px。

加 border 或 padding 为什么能阻止折叠

margin 折叠发生的前提是“相邻且无隔离”。只要在两个可能折叠的 margin 之间插入一个“屏障”，折叠就失效。这个屏障可以是：

• 非零的 border（哪怕只有 1px solid transparent）
• 非零的 padding（哪怕只有 padding-top: 1px）
• 创建 BFC 的容器（如 overflow: hidden）

关键点：这个屏障必须属于其中一个参与折叠的元素自身，或其父容器（且该父容器需满足 BFC 条件）。单纯给父元素加 padding 不一定管用，要看结构。

实际中更稳妥的写法有哪些

光靠 border 或 padding 容易引入视觉干扰或破坏布局预期，推荐组合策略：

• 对列表项或段落流，统一用 margin-bottom，避免同时设 margin-top 和 margin-bottom
• 父容器启用 BFC：overflow: hidden、display: flow-root（现代推荐）、contain: layout
• 用 gap 替代 margin（仅限 Flex/Grid 容器内子项）
• 若必须用 border 隔离，优先选 border-top: 1px solid transparent，比 padding 更轻量且不影响盒尺寸计算（除非 box-sizing 是 content-box）

示例：两个

.item {
  margin: 20px 0;
}
.item + .item {
  border-top: 1px solid transparent; /* 插入屏障 */
}