HTML表格怎么去除单元格之间的空隙？CELLSPACING属性归零技巧-html教程-PHP中文网

border-collapse: collapse是解决表格边框双线与间隙问题的根本方案，必须设在table上并配合td/th的border声明；cellspacing="0"仅辅助清除传统间距，但无法消除边框重叠或内部元素margin导致的视觉空隙。

html表格怎么去除单元格之间的空隙？cellspacing属性归零技巧

直接归零 cellspacing 不一定能彻底去隙——它只管单元格边框间距，不管边框重叠、默认 margin 或内边距干扰。

cellspacing="0" 为什么有时没用？

设置 cellspacing="0" 确实能消除传统意义上的“单元格间空白”，但常见失效场景包括：

表格或单元格本身有 border，且 border-collapse 为 separate（默认），此时两个相邻边框会并排显示，视觉上仍是“双线”或发虚
嵌套了 <p></p>、<h3></h3> 等自带上下 margin 的元素，它们撑开了 <td> 高度，造成“行间空隙”假象 <li>CSS 中设置了 <code>padding（对应旧属性 cellpadding），内容离边框太远，让人误以为“有空隙”
父容器或表格用了 font-size: 0 以外的值，而 <td> 内联文本产生基线对齐间隙（尤其含图片时） <h3>border-collapse: collapse 是更可靠的起点</h3> <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>必须同时作用于 <code><table> 元素，仅设 <code><td> 无效 <li>一旦启用，<code>border-spacing 和 cellspacing 自动失效，所以无需再设 cellspacing="0"
配合 border: 1px solid #000 才能显效果；若没设 border，collapse 看不出变化
注意：th 和 td 若单独设了 border，需统一颜色/宽度，否则合并后可能出现粗细不均

示例：

table { border-collapse: collapse; border: 1px solid #000; }
td, th { border: 1px solid #000; padding: 4px; }

还要检查 td/th 的 padding 和内部元素 margin

即使边框贴死了，<td> 内容仍可能“浮起来”或“撑高”，造成视觉空隙： <ul> <li> <code>padding 是现代替代 cellpadding 的方式，设为 0 可让内容紧贴边框（但通常保留 4–8px 更易读）

如果 <td> 里放了 <code><p></p> 或 <h2></h2>，它们默认带 margin-top/margin-bottom，需显式重置：
```
td p, td h2 { margin: 0; }
```
含图片时，<img> 默认是 inline 元素，会和文字基线对齐，下方留白；加 vertical-align: top 或设 display: block 即可消除