HTML5列表项添加间隔边框技巧

实操建议：

• 给
  或
  设置 list-style: none 去掉默认符号，避免样式干扰
  1. 对
  2. 使用 border-bottom: 1px solid #e0e0e0 + :not(:last-child)
  3. 若列表项内有内边距（padding），边框会出现在内容下方；如需边框撑开间距，改用 margin-bottom 更可控

  ul {
    list-style: none;
    padding: 0;
  }
  li {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  li:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
  }

  用 margin-bottom 比边框更灵活

  如果目标只是“让列表项之间有间隔”，margin-bottom 往往比边框更合适——它不参与绘制、不影响盒模型计算逻辑、兼容性更好，也更容易响应式调整。

  常见错误现象：只设 margin-bottom 却没清空父容器的 padding 或默认 margin，导致顶部/底部空白异常。

  实操建议：

  • 上清除默认上下边距：margin: 0
    • 设 margin-bottom: 16px，最后一项自动无下边距
    • 如需最后一项也保持一致呼吸感，可对整个
      加 padding-bottom: 16px

      ul {
        margin: 0;
        padding: 0;
      }
      li {
        margin-bottom: 16px;
      }
      ul {
        padding-bottom: 16px;
      }

      避免用 border-top + :not(:first-child) 的陷阱

      虽然语法可行，但 border-top 在滚动或动画场景下容易引发重绘问题，尤其在移动端 WebKit 内核中，可能造成边框闪烁或错位。

      使用场景限制：

      • 仅适用于静态、无交互的纯展示列表
      • 若列表后续要加 hover 效果或 JS 动态增删项，border-top 会让 DOM 变更后样式重排更难预测
      • IE11 及更早版本不支持 :not() 伪类嵌套，若需兼容，必须用 class 控制

      Flex 布局下用 gap 是未来方向

      现代浏览器已普遍支持 display: flex + flex-direction: column + gap 组合，这是语义最清晰、控制最精准的方式——gap 专为“项间间距”而生，不污染边框、不干扰点击区域、不触发重排。

      注意点：

      • gap 对
        • 默认无效，必须先设 display: flex 或 display: grid
        • 设为 flex 后，
        • 默认变成行内排列，需加 flex-direction: column
        • Safari 14.1+ 才完整支持 gap 在 flex 中的表现，旧版 Safari 需降级处理

        ul {
          display: flex;
          flex-direction: column;
          gap: 16px;
          list-style: none;
          margin: 0;
          padding: 0;
        }

        实际项目中，margin-bottom 仍是兼容性与维护性平衡最好的选择；gap 值得在新项目中优先尝试，但务必确认目标环境支持度；边框方案只在明确需要“视觉分隔线”而非“间距”时才启用。

        到这里，我们也就讲完了《HTML5列表项添加间隔边框技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！