应使用CSS padding控制td/th内边距，因cellpadding在HTML5中已过时：它只能全局设于table标签、仅支持px单位、无法响应式缩放且不支持!important覆盖。
直接用 padding 设置 td 或 th 的内边距，就能控制内容与单元格边框的垂直间距；cellpadding 属性虽能实现，但已被现代 CSS 取代，且易被样式覆盖。
为什么 cellpadding 经常不生效？
它只是 HTML 属性，优先级低于 CSS 的 padding，一旦你写了类似 td { padding: 5px; } 的规则，cellpadding 就会被忽略。
- 浏览器默认样式可能已给
td设了padding（如 Chrome 默认是1px） - 外部 CSS 框架（如 Bootstrap）会重置表格内边距
-
cellpadding无法单独控制上下或左右，只能设统一值 - HTML5 中该属性已过时，W3C 不再推荐使用
padding 怎么设置才精准控制垂直间距？
垂直间距 = 上下 padding 值之和，所以重点设 padding-top 和 padding-bottom。
- 要让所有单元格内容离上边框 8px、下边框 12px：
td, th { padding-top: 8px; padding-bottom: 12px; } - 若只希望文本“视觉居中”，建议配合
line-height或固定height，否则矮单元格里padding看不出效果 - 避免对整个
table设padding—— 它只作用于表格外边距，不影响单元格内部
遇到 vertical-align: middle 不起作用怎么办？
这不是间距问题，而是对齐失效。常见原因和对应操作：
立即学习“前端免费学习笔记（深入）”；
- 单元格没显式设高度（
height或min-height），导致vertical-align缺少参照基准 -
td里嵌套了div等块级元素，而vertical-align对块级子元素无效 —— 此时应把div改成display: inline-block，或直接用flex - 父
table设了border-collapse: collapse，不影响vertical-align，但可能让边框合并后显得“挤”——这不是对齐问题，是视觉错觉
真正影响内容到边框距离的，只有 td/th 的 padding；vertical-align 决定的是内容在已有空间里的位置。这两者常被混用，但作用阶段完全不同：先有 padding 撑出空间，再靠 vertical-align 在这个空间里摆放内容。
