应统一border归属并配合margin控制间距，如每个元素设border-bottom、最后一个设none，再用margin-bottom统一控制间距，避免重叠变粗。
盒子叠加时 border 重叠导致视觉变粗怎么办
多个相邻块级元素（如 div）垂直堆叠时，若都设置了 border-bottom 和 border-top，上下边框会紧贴甚至视觉上“合并”，看起来比单侧粗一倍。这不是 bug，是盒模型的自然表现——但多数场景下不符合设计预期。
- 典型现象：
border-bottom: 1px solid #ccc+ 下一个元素的border-top: 1px solid #ccc→ 实际看到的是 2px 粗的线，中间无间隙 - 根本原因：两个 border 在同一物理像素线上渲染，浏览器未做自动去重（不像
margin的折叠行为有规范定义） - 最直接解法不是“避免重叠”，而是「让它们不同时存在」——只保留相邻元素中的一侧 border
用 margin 负值强行拉开 border 间距可行吗
可以，但强烈不建议。用 margin-top: -1px 或 margin-bottom: -1px 把 border 拉开，看似解决了重叠，实则引入新问题：
- 破坏文档流稳定性：负 margin 可能引发父容器高度塌陷、兄弟元素错位
- 响应式脆弱：在缩放、高 DPI 屏幕或字体放大时，-1px 可能变成半像素渲染模糊，或完全失效
- 维护成本高：每个叠加项都要单独计算 offset，一旦增删元素，所有负值都要重调
- 更隐蔽的问题：如果元素有
transform或will-change，负 margin 可能触发非预期图层合成
推荐方案：统一 border 归属 + 配合 margin 控制间距
把 border “收归一处”，再用 margin 控制真实间距。这是语义清晰、可维护性强、兼容性无死角的做法。
- 只给每个元素设置
border-bottom，最后一个元素设border-bottom: none - 或者只给每个元素设
border-top，第一个元素设border-top: none - 用
margin-bottom（或margin-top）控制元素之间的空白距离，该值与 border 宽度无关 - 若需等距分隔（比如列表项之间 16px 间距），设
margin-bottom: 16px，border 仅作装饰线，不参与间距计算
.item {
border-bottom: 1px solid #e0e0e0;
margin-bottom: 16px;
}
.item:last-child {
border-bottom: none;
margin-bottom: 0;
}
遇到 flex / grid 布局时 border 重叠怎么处理
Flex 容器内子项默认不换行、无天然间距，若又都设了 border，容易在交叉轴或主轴方向出现密集边框线。此时不能依赖 margin 折叠逻辑（flex 中 margin 不折叠），要主动隔离：
立即学习“前端免费学习笔记（深入）”；
- 对 flex 容器加
gap（推荐）：它会在项目间插入空白，且完全避开 border 渲染区域 ——gap: 1px就能确保 border 不接触 - 若需兼容老浏览器（IE 不支持 gap），改用
margin+:not(:first-child)：给除第一个外的所有子项加margin-top: 1px，border 全部设为border-top - grid 同理，优先用
row-gap/column-gap，它们比 margin 更可靠，不会被overflow: hidden截断
真正容易被忽略的点是：border 位置（top/bottom/left/right）必须和你选择的 spacing 方式（margin-top/margin-bottom/gap）严格对齐。混用会导致视觉节奏断裂，比如用 margin-bottom 却给每个元素设 border-top，第一项上面就多出一条孤立的线。
