<分区>
我花了最后几个小时试图理解为什么 td 的 margin CSS 属性(至少)元素基本被忽略。
例如，这个fiddle使用 div 显示表格行的“模拟”元素，后跟一个“真实的”table带有单个 tr 的元素. (我在本文末尾给出了所有这些的完整代码。)div模拟 tr已上课 TR ，同样，div模拟td s 已上课 TD . div.TR 的 CSS已尽可能接近tr (唯一的异常(exception)是在这种情况下不适用于 tr 的那些 CSS 指令)。同样，div.TD 的 CSS和 td应该几乎相同。特别是:
div.TD,td{border:1px solid black;}
div.TD,td{margin:15px;padding:5px}
此外，每个 div.TD每个 td包含一个空的 div元素，具有以下尺寸:
div.TD > div,td > div{width:90px;height:60px;}
如您所见，div.TD 的 CSS 规范和 td元素具有相同的边距、边框和填充规范，并且具有相同尺寸的内容。然而，如下图所示，只有 div.TD元素显示指定的边距和边框。对于 td ，这两个维度实际上都是 0。(另外，同样令人费解的是，为 div.TR 元素指定的边框是可见的，但不是为 tr 元素指定的相同边框。)
顶行是使用div的“模拟”，底行来自善意table元素行。顶行中可见的浅棕色区域对应于指定的 15 像素边距。绿色区域(在“模拟”和“真实”表格单元格中均可见)对应于指定的 5 像素填充。
I want to understand why this inconsistency of behavior
...但是我找不到任何解释。换句话说，这种不一致的基本原理/动机是什么。或者至少，我怎么能快速找出造成这种明显不一致的官方 CSS 规则。 (我确实搜索过这个，但没有找到。更具体地说，我确实找到了暗示——通过遗漏——上面显示的两种情况之间应该没有区别。)
(我所发现的一切充其量只是实现特定效果的秘诀，但这些秘诀没有阐明行为不一致的问题。这些解决方案基本上是肤浅的创可贴，因为它们不'首先解决导致问题的潜在缺乏理解。)
好的，这是上面提到的代码，正如所 promise 的那样:
CSS
/* basic reset */
body{background:white;}
html,body,div,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0}
table{border-collapse:collapse;border-spacing:0;}
/* demo-specific css begins here */
div.TR{display:table;}
div.TR,tr{border:1px solid #EE0000;}
div.TR,tr{background:#E8B36D;}
div.TD{float:left;display:inline;}
table{clear:both;}
div.TD,td{border:1px solid black;}
div.TD,td{background:#409152;}
div.TD,td{margin:15px;padding:5px}
div.TD > div,td > div{background:#1E4C6D;}
div.TD > div,td > div{width:90px;height:60px;}
HTML
<div class="TR">
<div class="TD">
<div></div>
</div>
<div class="TD">
<div></div>
</div>
</div>
<table>
<tr>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>