border-collapse仅控制表格相邻边框是否合并，不影响标准盒模型；它不改变padding、margin、width计算，也不作用于box-sizing，真正影响布局的是border-spacing、padding及子元素margin的组合效果。
border-collapse 不会破坏标准盒模型，它根本不管盒模型。 它只决定相邻边框是分开画还是合并成一条线，对 padding、margin、width 计算全无影响。所谓“破坏”，其实是误把视觉松紧感归因于它，而真正起作用的是 border-spacing、padding 和子元素的 margin 三者叠加的结果。
border-collapse 的真实作用范围很窄
它只在两个值之间切换：
-
border-collapse: separate（默认）→ 每个td/th自带完整边框，相邻边框之间留空，空隙大小由border-spacing控制 -
border-collapse: collapse→ 相邻单元格边框“挤”成一条线，border-spacing和empty-cells失效
无论哪种模式，padding 都照常生效，margin 在 td 上始终被忽略（规范行为），box-sizing 对 td 本身无效——这些都不是 border-collapse 动的。
为什么看起来“盒模型乱了”？
常见错觉来源：
立即学习“前端免费学习笔记（深入）”；
- 设了
border-collapse: collapse后调border-spacing→ 浏览器直接忽略，你以为没生效，其实是它本就不该起作用 - 看到单元格内容离边框太近，就去加
padding，但发现“高度变高了” → 实际是td > p的默认margin-top/margin-bottom在撑开空间，不是padding导致的 - 用开发者工具高亮时，误把子元素的
margin区当成td的padding区，调了半天padding却没变化
调试时该盯哪几个地方？
按优先级顺序检查：
- 先确认
table上是否显式写了border-collapse；没写就按separate理解布局逻辑 - 如果是
separate模式，想调单元格间距 → 改border-spacing，别碰padding - 如果是
collapse模式，想让文字离边框远点 → 改td { padding: 12px; }，别去动border-spacing - 发现高度异常 → 检查
td里有没有p、h3这类自带margin的元素，加td > * { margin: 0; }
真正容易翻车的，从来不是单个属性值写错，而是切换 border-collapse 后，border-spacing、padding、子元素 margin 三者谁还生效、谁已失效、谁还在悄悄撑开空间——必须同时看，不能只盯一个。
