应直接为<td>和<th>设置CSS padding，因<table>不支持内边距；cellpadding已过时，无法响应式且校验失败；padding四值顺序为上→右→下→左，需配合border-collapse: collapse确保视觉可控。
直接给 <td> 和 <th> 设 padding 才有效
给 <table> 元素本身设 padding 是无效的——表格不是块级容器，不响应内边距。真正起作用的是作用在单元格上的样式。
常见错误现象：写 <table style="padding: 10px">，结果内容完全没缩进，还以为 CSS 失效了。
- 必须选中
<td>或<th>设置，例如：td, th { padding: 8px 12px; } - 若表头和数据单元格需要不同间距，分开写：
th { padding: 10px 16px 6px; }、td { padding: 6px 12px; } - 避免用
cellpadding属性（如<table cellpadding="8">），它已过时，无法响应式、不可继承、校验失败
padding 的四值语法顺序不能错
写成 padding: 10px 20px 5px; 看似省事，但容易记混第三值是“下”还是“左”。实际顺序固定为：上 → 右 → 下 → 左。
使用场景：按钮文字上下留白多、左右紧凑；表格表头顶部多留空、底部少留空；卡片内容顶部呼吸感强、底部收得紧。
立即学习“前端免费学习笔记（深入）”；
- 1 值：
padding: 12px;→ 四边统一 - 2 值：
padding: 8px 16px;→ 上下 8px，左右 16px - 3 值：
padding: 6px 12px 10px;→ 上 6px，左右 12px，下 10px - 4 值：
padding: 4px 8px 12px 16px;→ 上 4、右 8、下 12、左 16
注意 border-collapse: collapse 对 padding 的影响
默认情况下，表格使用 border-collapse: collapse（边框合并），此时 padding 表现稳定、视觉可控；一旦切到 separate 模式，padding 仍生效，但会被 border-spacing 叠加干扰。
性能/兼容性影响：所有现代浏览器对 collapse 下的 padding 渲染一致；separate + border-spacing 在旧版 IE 中支持弱，且易与 padding 混淆导致列宽异常。
- 想让表格看起来更紧凑？保持
border-collapse: collapse（默认），只调padding - 想加大列间距？优先用
border-spacing: 10px 0;（仅水平），而非盲目加大padding-right和padding-left - 不要同时给
<td>设大padding又设大border-spacing，否则单元格实际宽度会远超预期
行内元素里设 padding 为什么“没反应”？
如果把 padding 加在 <span> 或 <a> 这类行内元素上，padding-top 和 padding-bottom 看起来没撑开高度——这不是 bug，是规范行为。
原因：行内元素的垂直 padding 不影响行高（line-height），只扩展背景和点击热区。用户常误以为“样式没生效”，其实是视觉反馈滞后。
- 要真正撑开空间，改显示模式：
display: inline-block;或display: inline-flex; - 别用
line-height去模拟垂直padding，那只是文字居中，背景色和交互范围仍不对 - 表格单元格天然是
table-cell显示类型，所以padding垂直方向一定生效，无需额外处理
padding 百分比值永远相对于父容器宽度计算，不是自身宽高，也不是父容器高度。窄屏下看似合理，宽屏时可能突然撑得过大——这点在响应式表格中极易被忽略。 
