如何移除Flexbox导航栏多余间距，实现链接背景填满导航栏高度

要实现导航链接背景填满整个导航栏高度、相邻链接零缝隙，无需硬编码固定值、也不需要过时的负margin方案，按以下步骤配置即可：

• 第一步：做基础样式重置，消除浏览器默认样式带来的意外间距
  这一步是大多数“莫名缝隙”的根源，统一盒模型计算规则：

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

• 第二步：配置Flex导航容器的核心属性

  .navbar {
    display: flex;
    /* 明确取消Flex项之间的默认间隙 */
    gap: 0;
    /* 让内部导航链接沿垂直方向自动拉伸，完全填满导航栏高度 */
    align-items: stretch;
  }
  

  这里align-items: stretch是Flex布局的默认值，如果之前为了垂直居中文字修改过这个属性为center/flex-start/flex-end，就会导致链接无法撑满全高，改回默认值后，不需要手动给链接写height: 100%或者硬编码垂直方向的padding值，就能让链接背景自动适配导航栏的总高度。
• 第三步：调整导航链接的基础样式
  只需要给链接配置水平方向的padding作为文字点击区域，不需要额外调整垂直方向的内边距来撑高度：

  .navbar a {
    text-decoration: none;
    color: inherit;
    /* 仅配置水平方向的内边距，垂直内边距不要写固定值 */
    padding: 0 16px;
  }
  

• 常见问题排查：
  • 如果相邻链接之间还出现细缝隙，检查导航容器有没有被之前的代码设置过gap值，或者a标签有没有默认的margin残留，配合第一步的全局清零就能彻底消除
  • 完全不需要用负margin去抵消缝隙，现代Flex布局的原生属性已经能覆盖零间距的需求，后续调整导航栏高度时，链接的背景会自动适配全高，不需要反复修改硬编码的数值

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