如何在CSS中处理表格单元格table-cell的怪异盒模型表现？-css教程-PHP中文网

margin在table-cell上完全不生效，是CSS规范明文规定的行为，浏览器静默忽略，加!important也无效；真正控制单元格间距的是border-spacing（仅separate模式下生效）和padding。

如何在css中处理表格单元格table-cell的怪异盒模型表现？

为什么 `margin` 在 `table-cell` 上完全不生效

这不是浏览器 bug，是 CSS 规范明文规定的行为：table-cell 元素的 margin 属性被静默忽略——开发者工具里会直接划掉该行，加 !important 也无效。你写的 td { margin: 10px; } 或 div[display: table-cell] { margin-left: 20px; } 都不会产生任何外部间距。

真正起作用的只有两个属性：border-spacing（控制单元格之间物理间隙）和 padding（控制内容到单元格边框的距离）。选错地方调样式，永远看不到效果。

border-spacing 只在 border-collapse: separate 模式下有效；设成 collapse 后它彻底失效
padding 始终有效，但只影响内部留白，不改变单元格之间的相对位置
子元素（如 p、h3）的 margin-top/margin-bottom 在 table-cell 内也会被折叠并忽略——这是表格格式化上下文（table formatting context）的固有行为

`border-spacing` 和 `padding` 的分工必须分清

很多人调表格“松散”或“挤在一起”，本质是混淆了这两个属性的职责：

border-spacing: 8px 4px → 控制列间距 8px、行间距 4px（仅在 border-collapse: separate 下生效）
padding: 12px 16px → 控制文字/图片离单元格边框的距离，不影响相邻单元格位置
若已设 border-collapse: collapse，再调 border-spacing 就是徒劳；此时唯一可控的留白手段只剩 padding
IE7 及以下不支持 border-spacing，如需兼容，只能统一用 padding + 结构微调（比如包一层 div）

`width` 和 `box-sizing` 在 `table-cell` 中为何靠不住

table-cell 的宽度不由单个元素的 width 主导，而是整行所有单元格共同博弈的结果：内容长度、table-layout 设置（auto 或 fixed）、显式 width 三者共同决定。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

即使写 td { width: 100px; padding: 20px; border: 5px solid #000; box-sizing: border-box; }，最终渲染宽度仍可能远大于或小于 100px
box-sizing 对 table-cell 几乎无用——因为它的尺寸根本不由标准盒模型计算逻辑驱动
只有在 table-layout: fixed 下，第一行 th/td 的 width 才具决定性；此时 box-sizing: border-box 仅影响 content 区域压缩，不影响整行分配
height 同样不可靠，min-height 比 height 更可控

子元素的默认 `margin` 会偷偷撑开视觉空间

表格单元格本身不合并子元素的 margin，但里面塞一个 p 或 h3，它们的默认上下外边距就会直接暴露出来，看着像“单元格间隙”，其实是内容溢出。

检查开发者工具，确认高亮区域是 td 的 padding 区，还是子元素的 margin 区
通用解法：td > * { margin: 0; }，或更精准地重置：td p, td h1, td h2, td h3 { margin: 0; }
别用 overflow: hidden 遮掩——它只是藏问题，不是解决问题
真正难处理的从来不是单个属性，而是 border-collapse 渲染模式切换后，border-spacing、padding、子元素 margin 三者叠加的视觉反馈