CSS如何给表格单元格应用正确的盒模型_注意table-cell的margin无效需要用padding-css教程-PHP中文网

table-cell元素不支持margin是css规范定义的行为，浏览器会忽略它；单元格间距需用table的border-spacing（separate模式）或td/th的padding控制。

css如何给表格单元格应用正确的盒模型_注意table-cell的margin无效需要用padding

因为 table-cell 的 margin 在规范里被定义为「无效」——浏览器会直接忽略它，不是 bug，是标准行为。你看到的单元格间距，其实是靠 border-spacing（表格级）或 padding（单元格内部）撑开的。

常见错误现象：
– 给 <td> 或 <code><th> 写了 <code>margin: 10px，完全没变化
– 用开发者工具检查，发现 margin 字段被划掉（strikethrough）
– 误以为是选择器权重问题，反复加 !important，依然无效

真正控制单元格「外侧间隙」的是父级 <table> 的 <code>border-spacing（仅对 border-collapse: separate 有效）
控制内容与边框距离，必须用 padding，作用在 <td>/<code><th> 上才生效 <li>如果用了 <code>border-collapse: collapse，border-spacing 失效，此时唯一能调整视觉间距的方式只剩 padding

没有真正的 margin，但可以模拟。关键是分清你要的效果属于哪一类：

想让相邻单元格之间留空？→ 改 <table> 的 <code>border-spacing（例如 border-spacing: 8px）
想让单元格内容离边框远一点？→ 直接给 <td> 加 <code>padding（例如 padding: 6px 12px）
想让整行/整列看起来「缩进」？→ 不要动 td，改 <tr> 的 <code>padding 无效（tr 也不支持 padding），得用 border-spacing 配合 background-clip 或伪元素 hack，但通常不值得
示例：安全又通用的写法

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
```
table {
  border-collapse: separate;
  border-spacing: 0;
}
td, th {
  padding: 8px 12px;
}
```
border-collapse: collapse 和 separate 的盒模型差异

同一个 <td>，在两种模式下表现完全不同： <ul> <li> <code>border-collapse: separate：每个单元格是独立盒子，border-spacing 控制间隔，padding 控制内边距，margin 仍无效
border-collapse: collapse：单元格边框合并，border-spacing 彻底失效；此时 padding 是唯一可控的「留白」手段，且要注意边框重叠可能吃掉部分 padding 视觉空间
兼容性无风险，但老版本 IE 对 border-spacing 支持弱（IE7 及以下不支持），如需兼容，只能靠 padding + 结构微调

性能影响极小，但频繁切换 border-collapse 值可能触发重排（reflow），尤其在大型表格中建议初始化时就定好，避免运行时修改。

padding 看似简单，但在表格里有几个实际坑：

vertical-align 会影响 padding 的视觉对齐感——比如 vertical-align: top 下，padding-top 看得见，但 padding-bottom 可能被下面单元格内容「顶上来」，显得不对称
如果单元格里有 input、button 等替换元素，它们的默认 box-sizing 是 content-box，而 td 默认是 border-box，混用时 padding 计算容易错乱
响应式表格中，用 em 或 rem 设 padding 比 px 更稳妥，避免字号缩放后文字贴边