给或加padding可控制文字与边框间距，需避免对行内元素或text-indent误用，推荐简写语法、border-box盒模型及em/vw等响应式单位。
padding 作用于 <td> 或 <code><th> 元素本身
<p>HTML 表格单元格内的文字默认紧贴边框，想往里缩一点，最直接的方式就是给 <code><td> 或 <code><th> 加 <code>padding。它不是作用在文字上，而是作用在单元格内容区的“内边距”——也就是文字和单元格边框之间的空白。
常见错误是试图给 <span></span> 或文字本身加 padding，结果没效果，因为行内元素的上下 padding 不影响布局（除非设为 display: inline-block）。
-
padding接受单值（如padding: 8px）、双值（padding: 4px 12px表示上下/左右）、四值（padding: 2px 4px 6px 8px顺时针：上右下左） - 推荐用简写，比如
padding: 6px 10px，兼顾可读性和控制精度 - 如果表格用了
border-collapse: collapse，padding依然生效，且不会和边框重叠
避免用 text-indent 替代 padding
text-indent 只对块级元素首行生效，而 <td> 默认是 <code>display: table-cell，虽支持 text-indent，但行为不稳定：换行后第二行不缩进、vertical-align 可能错位、在某些旧版 Safari 中失效。
真正需要“首行缩进”（比如段落排版）才用 text-indent；日常对齐、留白，请坚持用 padding。
- 错误写法：
<td style="text-indent: 12px">文字</td> - 正确写法：
<td style="padding-left: 12px">文字</td> - 若需统一所有单元格，建议写 CSS 规则：
td, th { padding: 4px 8px; }
注意 box-sizing 对 padding 渲染的影响
默认情况下，<td> 的 <code>box-sizing 是 content-box，这意味着你设的 padding 会额外增加单元格宽度——可能撑破表格、触发横向滚动条，尤其在固定布局（table-layout: fixed）下更明显。
解决办法是显式设置 box-sizing: border-box，让 padding 包含在设定的宽高内：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
td, th {
box-sizing: border-box;
padding: 6px 10px;
}
- 这个设置必须加在
td/th上，不能只加在table上 - IE8+ 支持
box-sizing: border-box，无需前缀 - 如果不改
box-sizing，又想控宽，就得手动减小width值来抵消padding
响应式场景下慎用固定像素 padding
移动端小屏时，padding: 10px 可能让文字挤到看不见，或导致单元格内容换行异常。这时候用相对单位更稳妥：
-
padding: 0.5em 0.75em—— 基于字体大小缩放，兼容性好 -
padding: clamp(4px, 1vw, 8px) clamp(6px, 1.2vw, 12px)—— 在最小/最大值间弹性调节（现代浏览器支持） - 避免在
@media中逐个重写 padding，优先用相对单位一劳永逸
真正麻烦的不是怎么加 padding，而是加完之后要不要同步调 font-size、line-height 和 min-width——这些细节不配齐，缩进看着就“飘”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
