最直观做法是给左盒子设 border-right，但需配合 box-sizing: border-box 防止增宽错位；伪元素方案更灵活，适合动态控制；flex 布局下推荐 gap + border 组合，简洁高效。
用 border-right 给左侧盒子加右边框实现分割线
直接在左盒子上设置 border-right 是最直觉的做法，但要注意：它会增加元素总宽度，容易导致换行或布局错位。
常见错误现象：display: inline-block 的两个盒子本该并排，加了 border-right: 1px solid #ccc 后右侧盒子被挤到下一行。
- 必须配合
box-sizing: border-box，否则边框算在 width 外 - 如果用百分比宽度（比如各占 50%），要预留边框宽度，例如左盒设
width: calc(50% - 1px)，右盒保持width: 50% - 若父容器有
font-size: 0清除 inline-block 间隙，记得在子元素里重置font-size，否则文字不显示
用伪元素 ::after 在中间插入竖线更灵活
伪元素方案不侵入真实 DOM 结构，也不影响盒模型计算，适合需要动态控制分割线显隐或样式的场景。
使用场景：导航菜单、标签页、卡片分隔等需精确居中、可 hover 变色、或响应式隐藏分割线的情况。
- 给父容器设
position: relative，再用::after绝对定位画一条竖线，x 坐标取 50% - 为避免遮挡内容，
z-index设低值（如-1），或确保伪元素不覆盖可点击区域 - 若两个盒子高度不一致，伪元素高度建议用
height: 100%并确保父容器有明确高度，否则可能只显示一半
Flex 布局下用 gap + border 组合最省心
现代项目优先用 Flex，gap 控制间距，再用 border 模拟分割线，逻辑清晰且无兼容性顾虑（Chrome 84+、Firefox 63+、Safari 14.1+）。
性能影响几乎为零，但注意 Safari 旧版本（gap，需降级用 margin 或伪元素。
- 父容器设
display: flex; gap: 12px，然后给左盒子加border-right: 1px solid #e0e0e0 - 此时
gap是纯空白，border-right是视觉线，二者叠加形成“带空隙的分割线”，效果更干净 - 如果要让分割线垂直居中（而非贴左盒底部），不要依赖
border-right，改用伪元素或额外子元素
为什么不用 margin 模拟分割线
有人试图用右盒的 margin-left: 1px + 背景色模拟线，这是典型误区——它本质是空白，不是线，无法设置颜色、粗细、虚实等样式，也无法独立交互（比如 hover 高亮）。
更严重的是：当两个盒子高度不同，这种“空白线”在视觉上会断开，而真实 border 或伪元素可以撑满高度。
- 所有需要样式控制、状态反馈、或跨浏览器稳定表现的分割线，都该用
border或伪元素 - 移动端要注意
1px在高清屏上发虚，可用transform: scaleY(0.5)或box-shadow替代
实际开发中，最易被忽略的是高度对齐问题：两个盒子哪怕只差 1px，用 border-right 就会露底；用伪元素则必须确认父容器 height 或 min-height 是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
