React项目中无法消除导航栏navbar与落地页landing page之间的间距

• 先重置全局默认边距
  浏览器默认会给<body>、块级元素自带上下margin/padding，优先在全局CSS中添加重置规则：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  也可以单独给导航栏和首页容器分别设置margin: 0、padding: 0，排除默认边距影响。

• 检查UI组件库自带的默认边距
  如果是使用Ant Design、MUI、React Bootstrap等第三方组件库的导航栏组件，这类组件通常会自带底部margin，直接覆盖组件样式即可，以MUI的AppBar为例：

  .MuiAppBar-root {
    margin-bottom: 0;
  }
  

  部分组件也可以通过props关闭内边距，或者直接传入style={{marginBottom: 0}}行内样式覆盖。

• 解决margin塌陷问题
  如果下方首页容器的第一个子元素设置了margin-top，会出现margin穿透效果，看起来像是导航栏和首页之间有间距，可通过以下任意一种方法解决：

  • 给首页容器添加overflow: hidden
  • 给首页容器添加padding-top代替子元素的margin-top
  • 给首页容器添加1px透明上边框：border-top: 1px solid transparent

• 排查行内/弹性布局的默认间距

  • 如果导航栏和首页容器都设置为inline-block，会出现默认字符间距，可给两个元素的共同父元素添加font-size: 0，再单独给子元素设置字体大小即可
  • 如果父容器使用flex布局，检查是否设置了多余的row-gap、gap属性，删除多余间距配置即可

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