行间距必须用border-spacing控制，且border-collapse需设为separate；该属性仅作用于table元素，双值分别设列距和行距，tr和td不响应margin，line-height或padding无法真正改变行间距离。

行与行之间的间距，本质是相邻 <tr> 元素上下边框之间的距离，必须通过 <code>border-spacing 控制，不能靠 margin 或 line-height 模拟。

用 border-spacing 设置行间距（垂直方向）

这是唯一符合语义、能真正影响表格结构间距的标准方式。前提是 border-collapse 必须设为 separate（默认值），否则 border-spacing 完全失效。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• border-spacing 是双值属性：第一个值管列间距（水平），第二个值管行间距（垂直），顺序不可颠倒 —— border-spacing: 0 12px 表示列距 0，行距 12px
• 只作用于 <table> 元素，写在 <code><tr> 或 <code><td> 上无效，也不继承 <li>单位只能是 <code>px、rem、vw 等绝对/相对长度，不支持 % 或负值
• 如果同时需要列距和行距不同，必须写成两个值，比如 border-spacing: 4px 8px，而不是 border-spacing: 8px（后者会让行列都为 8px）

为什么 margin 对 <tr> 无效？ <p><code><tr> 是表格内部行元素，display 计算值为 <code>table-row，它不响应 margin。给 <tr> 加 <code>margin-top 或 margin-bottom 完全没效果。

• 有人尝试给 <td> 加 <code>margin，但 <td> 的 display 是 <code>table-cell，同样忽略 margin
• 给整个 <table> 加 <code>margin 只能控制表格与其他元素的外部间距，不影响内部行与行之间距离
• 用 line-height 或 padding 虽然能让内容“看起来”拉开，但实际边框位置没变，视觉上仍紧贴，且可能引发边框重叠或选中异常

想让某几行间距更大？得绕开原生表格结构

原生 <table> 不支持按行差异化设置行距。<code>border-spacing 是表格级统一配置，无法单独指定某一行。

• 若只需视觉分离，可在特定 <tr> 后插入空行 <code><tr><td colspan="N" style="padding: 16px 0; border: none;"></td></tr>，但语义失真、可访问性下降
• 更稳妥的做法是放弃 <table>，改用 <code>display: grid 或 display: flex 模拟表格布局，获得对每一行间距的完全控制
• 嵌套表格也可行：外层 <table> 控制整体行距，内层每行用独立 <code><table> 包裹内容，但 DOM 复杂度上升，维护成本高 <p>真正要调行间距，就老老实实设 <code>border-collapse: separate 和 border-spacing；想精细控制某几行，就得换布局方案 —— 表格的语义和样式能力边界很清晰，硬拗只会埋坑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！