表格“松散”或“挤在一起”是因混淆border-collapse与padding职责：默认separate模式下需用border-spacing控制单元格间物理间隙，collapse模式下则依赖padding调节内容与边框距离，且子元素margin会额外撑开视觉间距。
为什么表格单元格看起来“松散”或“挤在一起”
这不是 bug，而是 border-collapse 和 padding 两个属性职责混淆导致的。浏览器默认用 border-collapse: separate，此时单元格自带边框间距（由 border-spacing 控制），但你可能只调了 padding，结果内容离边框远了，单元格之间却还是紧贴或过宽——因为 padding 不影响单元格之间的距离。
用 border-spacing 控制单元格间物理间隙
border-spacing 是唯一能直接调节“单元格与单元格之间空隙”的属性，但它只在 border-collapse: separate 下生效：
- 设
table { border-collapse: separate; border-spacing: 8px; }→ 所有行列间隙都是 8px - 设
border-spacing: 8px 4px→ 水平 8px，垂直 4px - 若已设
border-collapse: collapse，border-spacing完全被忽略，此时再调它也没用
用 padding 控制单元格内容与边框的距离
padding 作用对象是 td 或 th，它决定文字/图片离单元格边框有多远，不影响相邻单元格的位置：
-
td { padding: 12px 16px; }让内容呼吸，但不会让两列变宽 - 即使
border-collapse: collapse，padding依然有效，且更安全（兼容性好） - 注意：如果
td里嵌了div、p等块级元素，它们的默认margin会撑开padding区域，造成视觉“额外留白”——需重置子元素margin: 0
修复表格内部块级元素的默认外边距
表格单元格（td）本身不合并子元素的 margin，但里面塞个 p 或 h3，它们的默认 margin 就会直接暴露出来，看着像“单元格间隙”，其实是内容溢出：
- 检查开发者工具，确认高亮区域是
td的 padding 区，还是子元素的 margin 区 - 通用解法：
td > * { margin: 0; }或更精准地只重置常见元素：td p, td h1, td h2, td h3 { margin: 0; } - 别依赖
overflow: hidden遮掩——它只是藏问题，不是解决问题
真正难处理的从来不是单个属性，而是 border-collapse 渲染模式切换后，border-spacing、padding、子元素 margin 三者叠加的视觉反馈。调其中一个，往往要同步看另外两个是否还在悄悄起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
