cellpadding控制单元格内边距，仅作用于标签，统一设置所有/内容到边框距离；cellspacing控制单元格外边距，html5已废弃，现代用css的padding和border-spacing+border-collapse替代。

cellpadding 控制的是单元格内边距，但只能设在 <table> 上 <p>它决定的是 <code><td> 或 <code><th> 内容到自身边框的距离，所有单元格统一生效。值为数字，默认约 <code>1 或 2 像素。

常见错误现象：

• 把 cellpadding 写在 <td> 标签里——无效，浏览器会忽略 <li>设成 <code>cellpadding="0" 后文字仍没贴边——可能因 CSS 的 padding 覆盖了它，或浏览器默认样式干扰
• 想单独调某个单元格的内边距——做不到，cellpadding 是整表级属性

使用场景有限，仅适合快速原型或遗留系统维护。现代项目中基本不用。

cellspacing 控制的是单元格外边距，也只作用于 <table> <p>它定义的是相邻单元格边框之间的距离，即“格子与格子之间的空隙”，不是单元格和表格边框之间的距离（那部分也归它管）。</p> <p>关键细节：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>HTML5 已废弃该属性，不推荐新项目使用</li> <li> <code>cellspacing="0" 不等于“无缝”——需配合 CSS 的 border-collapse: collapse 才能真正消除间隙

不能写在 <tr> 或 <code><td> 上，加了也没用 <li>等价的现代写法是 <code>border-spacing: 0，但必须确保 border-collapse 为 separate（默认值）

CSS 的 padding 替代 cellpadding，支持精细化控制

这才是当前标准做法：直接给 <td> 和 <code><th> 设置 <code>padding。

优势明显：

• 可单独设置某一行、某一列甚至某个单元格：td:first-child { padding-left: 12px; }
• 支持四值语法：padding: 4px 8px 6px 10px（上右下左）
• 单位灵活：支持 em、rem、%，便于响应式
• 不会被其他样式轻易覆盖，优先级更可控

注意：如果同时用了 cellpadding 和 CSS padding，后者会生效——浏览器按层叠规则处理。

CSS 的 border-spacing 和 border-collapse 替代 cellspacing

两个属性必须配合使用，缺一不可：

• 当 border-collapse: separate（默认）时，border-spacing 生效，值为两个长度：border-spacing: 2px 4px（横向间距 纵向间距）
• 当 border-collapse: collapse 时，border-spacing 被忽略，单元格边框合并，此时“外边距”概念实际消失
• 想让表格看起来紧凑无缝，优先选 border-collapse: collapse，比折腾 border-spacing: 0 更可靠

容易被忽略的一点：如果表格有 border 且用了 collapse，边框重叠逻辑会影响最终线条粗细和颜色混合——这不是 bug，是规范行为。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！