表格内文字与边框距离应使用padding（作用于td/th），而非cellpadding或letter-spacing；后者分别控制单元格间距离和字符间距，三者作用对象不同，不可混用。
表格内文字间距 ≠ 单元格间距，别混用 cellpadding 和 letter-spacing
很多人一看到“表格文字间距”，下意识去调 cellpadding 或 border-spacing，结果发现文字没动，只是单元格变胖或变远了。真正控制“文字和边框之间距离”的是 padding（替代旧的 cellpadding），而控制“字与字之间空隙”的是 letter-spacing —— 两者作用对象完全不同。
常见错误现象：<td style="cellpadding:10px">文字</td> 不生效（cellpadding 是 <table> 属性，不能写在 <code><td> 上）；或给整个 <code><table> 加 <code>letter-spacing，结果数字、图标全被拉散。
-
padding应该加在<td> 或 <code><th> 上，比如 <code>td { padding: 8px 12px; }，它决定文字离单元格边框多远 -
letter-spacing要慎用在中文场景：设letter-spacing: 2px对英文有效，但对“你好世界”基本无感（浏览器不按字切分），除非你手动加空格或用 - 若想统一控制所有单元格内文字段落的行距，得用
line-height，不是靠padding模拟 - 验证方式：临时加一条
td { border: 1px solid #ccc; }，就能看清padding是否起作用 - 想让
padding视觉效果更明显，配合background-color或box-shadow辅助观察 - 不要用
margin替代padding：表格单元格不支持margin，写了也无效 - 按钮文字如
登 录（中间插入letter-spacing微调，比纯靠空格更可控 - 英文表头
USER ID需要等宽拉开，letter-spacing: 4px有效 - 避免在
input[type="text"]或textarea的父容器上设letter-spacing，某些 Android 浏览器会把输入光标位置算错 - 移动端小字号（≤14px）慎用负值，iOS Safari 渲染易出现字符重叠或锯齿
-
padding用em或rem：比如td { padding: 0.5em 0.75em; }，随font-size自动缩放 -
letter-spacing优先用em：letter-spacing: 0.05em比1px更适配不同分辨率 - 对关键表格（如数据看板），用媒体查询分段控制：
@media (max-width: 768px) { td { padding: 4px 8px; } } - 别忘了测试
th和td的间距是否一致——有时th默认有额外font-weight导致基线偏移，视觉上像“间距不同”
padding 设置要避开 border-collapse: collapse
如果你用了 table { border-collapse: collapse; }（常见于去除双线边框），那 padding 依然生效，但容易被误判为“没反应”——因为此时单元格边框贴在一起，padding 只撑开内容区，不会扩大单元格视觉间距。
典型陷阱：在 border-collapse: collapse 下给 td 设 padding: 10px，看起来文字还是紧贴边框，其实是边框太细/颜色太浅，导致内边距“看不见”。
中英文混排时，letter-spacing 的实际影响范围
给 td 直接设 letter-spacing: 1px，英文、数字、标点会等距拉开，但汉字几乎不变——因为浏览器对 CJK 字符默认不应用字符级间距，除非你显式启用 text-rendering: optimizeLegibility（兼容性差，Safari 不稳定）。
真实可用的场景有限：
响应式表格里，文字间距要随字体缩放动态调整
固定像素的 padding 和 letter-spacing 在响应式布局中容易失衡：小屏下 padding: 12px 可能让单元格撑满屏幕，大屏下又显得太空。
更稳妥的做法：
最易被忽略的是：当表格嵌套在 Flex 或 Grid 容器中时，letter-spacing 可能被父级 justify-content 或 align-items 干扰，这时得单独给 td 加 display: inline-block 锁定行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
