为什么导航栏margin-bottom与主内容margin-top发生重叠？

问题排查与解决 #

第一步：先修正CSS语法错误 #

你提供的CSS代码存在语法缺失，.navbar-link li, .navbar-link的样式规则没有闭合的}，会导致后续样式解析异常，先修正：

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0;
}

/* 补充闭合的大括号 */
.navbar-link li, .navbar-link {
    display: inline;
}

.main-content {
    display: flex;
    margin: 50px 0;
}

第二步：核心问题是垂直外边距折叠 #

你遇到的间距重叠是CSS标准中规定的块级元素垂直外边距折叠特性：两个上下相邻的块级兄弟元素，上方元素的margin-bottom和下方元素的margin-top会合并为单个外边距，最终取值为两个margin中较大的那个。你这里两个值都是50px，所以最终两个模块之间的间距只有50px，并非你预期的100px，看起来就像发生了重叠。

可选解决方法 #

• 方法1：只保留单侧外边距，比如删除.navbar的margin-bottom，把.main-content的margin-top设置为100px即可，反之也成立。
• 方法2：触发BFC（块级格式化上下文）避免折叠，给.main-content添加display: flow-root属性即可：

  .main-content {
      display: flex;
      margin: 50px 0;
      display: flow-root;
  }
  

• 方法3：用 padding 代替 margin 实现间距，比如给.navbar加padding-bottom: 50px，删除它的margin-bottom，不会触发折叠。

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