Flex子项边框重叠是因相邻元素各自渲染边框导致视觉加粗，非bug；推荐优先使用gap属性解决，兼容性不足时可用负margin或box-shadow等替代方案。
flex子项边框重叠是因为默认没留间隙
Flex布局本身不自动处理相邻子项之间的边框间距问题。两个带border: 1px solid #ccc的div并排时，视觉上会看到2px粗的“双线”，这不是bug，而是各自边框独立渲染的结果。你没法靠border-collapse解决——它只对table生效，用在flex容器或子项上完全被忽略。
用gap最干净，但要注意浏览器兼容性
gap是Flex布局原生支持的间隙控制属性，直接加在父容器上就能统一控制子项间距，且不会干扰边框渲染逻辑。
- 写法：
.parent { display: flex; gap: 12px; }→ 子项间自动留出12px空白，边框不再接触 - 优势：不依赖负margin，不影响DOM顺序、焦点流或屏幕阅读器遍历
- 坑点：IE全系不支持；Safari 14.1+才开始支持
gap在flex中（旧版只认grid）；若需兼容IE，必须降级方案 - 注意：
gap只作用于flex项目之间，对第一个/最后一个子项的外边距无影响，别指望它“撑开”父容器边框
用负margin快速见效，但得手动配边框宽度
当gap不可用时，负margin是最常用fallback。原理很简单：让后一个元素往回挪一个边框厚度，视觉上就“合并”了。
- 上下排列：给下方元素加
margin-top: -1px（假设边框是1px） - 左右排列：给右侧元素加
margin-left: -1px - 必须同步确保父容器
overflow: visible（默认值），否则负偏移部分会被裁掉 - 响应式风险：如果媒体查询里把边框改成
2px，负margin值也得同步改，硬编码-1px容易漏 - 示例：
.item + .item { margin-left: -1px; border-left: 1px solid #ddd; }，再配合前一项设border-right: none，就能只保留一条线
别忘了outline和box-shadow这些替代思路
真要追求像素级控制，或者需要hover动态显示/隐藏边框，负margin会引发重排或状态错乱。这时可以绕开真实边框：
-
outline不占布局空间，也不会合并，但不支持圆角和单边控制 -
box-shadow: 0 0 0 1px #ddd能模拟单边框，且z-index层级更可控；hover时改box-shadow比改border更轻量 - 若子项本身有
background，甚至可用background-image: linear-gradient(...)画一条细线，彻底避开边框语义
实际项目里，优先用gap；兼容性要求高就选负margin，但务必把边框宽度抽成CSS变量；涉及交互或复杂状态时，box-shadow往往比死磕border更省心。最容易被忽略的是：边框重叠常常不是布局问题，而是你同时给多个相邻元素写了完整边框，却没做归属划分——先想清楚“哪条边该由谁来画”，比急着加margin更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
