line-height在table-cell中仅控制单行文本基线间距，不直接决定单元格高度；实际高度由内容盒、padding、border共同决定，稳定控高应优先用td的padding或tr的height。
line-height 对 table-cell 的作用机制
line-height 在表格单元格（<td> 或 <th>）中**不会直接等同于行高**，它只影响单元格内**单行文本的基线间距**。当单元格内容只有一行且无换行时，line-height 会撑开单元格高度；但一旦内容换行、有 padding、或存在 inline 元素（如图片），实际高度就由内容盒 + padding + border 共同决定，line-height 只负责行内布局。
真正控制表格“行高”的推荐方式
要稳定控制整行（<tr>）的视觉高度，优先用以下方法：
- 给
<tr>设置height：直接指定最小高度，浏览器会尊重（除非内容溢出） - 给
<td>设置padding：最可控、兼容性最好，比如padding: 12px 8px能稳定产出一致行高 - 给
<td>设置min-height：配合vertical-align: middle可对齐内容，但需注意min-height在 table-cell 中部分旧版 IE 不支持 - 避免仅靠
line-height：例如line-height: 2.5在字体大小为 14px 时理论是 35px，但若单元格有 6px padding，最终高度≈47px，不可预期
line-height 在 td 中还能怎么用
它仍有实用场景，但必须明确目的：
- 垂直居中文本（单行）：设
line-height等于单元格高度，配合vertical-align: middle（冗余但保险） - 控制多行文本行距：如
td { line-height: 1.4; font-size: 14px; }让换行内容更易读 - 避免文字贴顶/贴底：默认
line-height: normal（约 1.2）常导致文字偏上，设为1.3～1.5更稳妥 - 慎用 em / unitless 值：
line-height: 1.5相对于当前 font-size，而line-height: 20px是绝对值——后者在混合字号表格里易错乱
常见踩坑与验证技巧
调试时容易误判原因：
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools 显示的 “Computed height” 是最终渲染高度，不是
line-height值——别盯着它反推line-height是否生效 - 设置
table { border-collapse: collapse; }后，border不再撑开行高，此时padding和line-height的影响更纯粹 - Firefox 对
line-height在table-cell中的处理略保守，有时比 Chrome 少撑 1–2px，用padding可规避 - 如果用了
display: table-cell的 div 模拟表格，line-height行为一致，但height在tr上无效，得改设在 cell 上
真要靠 line-height 控制行高，只适用于纯文本、固定字号、无 padding 的极简场景；其他情况，老老实实调 padding 或 height 更省心。
