border-style: none 不占空间，但若 border-width 被显式设为非零值（如先写 border-width: 2px 再写 border-style: none），部分旧引擎可能缓存 width 导致仍占位；应优先用 border: none 彻底重置，或检查 computed styles 中所有 border--width 必须为 "0px" 且 border--style 为 none。
border-style: none 为什么还占空间
它不占空间——border-style: none 会让浏览器把边框宽度计算为 0，不参与盒模型布局。如果你看到“有占位”，大概率是 border-width 被显式设了值，且没被覆盖。
常见错误场景：
- 写了
border-width: 2px+border-style: none，但顺序不对：简写border: 2px solid #000后再写border-style: none，会被后者覆盖；但若先写border-width: 2px再写border-style: none，部分旧版渲染引擎可能缓存了 width 值，导致 layout tree 中仍保留 border box 占位 - 父容器有
overflow: hidden+ 子元素用了transform: translateZ(0)，此时即使border-width: 0，也可能因层叠上下文边界参与裁剪而“看起来像占位” - 用开发者工具检查 computed styles，发现
border-top-width是2px，但border-top-style是none——这说明样式层已生效，但 layout 引擎尚未刷新（强制读取offsetHeight可触发重排）
如何确认 border 是否真被移除
别只看 DevTools 的 Styles 面板，要查 Computed 面板里的实际数值：
-
border-top-width、border-right-width等必须全为0px（不是auto或空） -
border-top-style必须是none或hidden（二者等效） - 如果任一边的
width> 0，哪怕style是none，该边仍会参与盒模型计算（W3C 规范明确：border box 尺寸 = content + padding + border-width）
快捷验证方式：
getComputedStyle(el).borderTopWidth // 应返回 "0px"
border: none 和 border-style: none 的行为差异
两者视觉效果一致，但底层机制不同：
-
border: none是完整简写，会同时重置border-width、border-style、border-color为初始值（width: 0,style: none,color: currentColor） -
border-style: none只改样式，border-width保持继承或之前设置的值（比如从border: 1px solid #000继承来 1px） - 所以当你想彻底清空边框影响，优先用
border: none；仅控制样式切换（如 hover 显隐），才用border-style
容易被忽略的“伪边框”干扰源
很多情况你以为是 border 没清掉，其实根本不是 border：
-
outline：表单控件 focus 时默认出现，border: none完全无效，必须加outline: none -
box-shadow：有人用box-shadow: 0 0 0 1px #ccc模拟细边框，清除时漏掉这一句，边框“还在” -
appearance: none：Safari/Chrome 中input、select默认有内建轮廓，border属性压根不控制它 - 表格单元格：必须配合
border-collapse: collapse，否则border-style: none在td上可能被table的默认分隔边框覆盖
最稳妥做法：打开 DevTools → Elements → 选中元素 → 切到 Computed → 搜索 border、outline、box-shadow，逐项确认来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
