为什么没有保证金为td？

Question

我花了最后几个小时试图理解为什么td元素的边距CSS属性（至少）基本上被忽略了。

例如，此fiddle使用div元素显示表格行的“模拟”，后跟带有单个table的“真实”tr元素。 （我在本文末尾给出了所有这些内容的完整代码。）模拟div的{​​{1}}已被赋予课程tr，同样地，TR模拟div的s已被赋予类td。 TD的CSS尽可能地与div.TR的CSS保持一致（唯一的例外是那些在这种情况下不适用于tr的CSS指令）。同样，tr和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，这两个维度实际上都是0.（同样令人费解的是，为td元素指定的边界是可见的，但不是div.TR元素的相同指定边界。 1}}元素。）

第一行是使用div的“模拟”，底行来自真正的tr元素行。顶行中可见的浅棕色区域对应于指定的15px边距。绿色区域（在“模拟”和“实际”表格单元格中都可见）对应于指定的5px填充。

  

我想理解为什么这种行为不一致

......但我找不到任何解释。换句话说，这种不一致的理由/动机是什么。或者至少，我怎么能很快找到导致这种明显不一致的官方CSS规则。 （我确实搜索过这个，但我没有找到它。更具体地说，我发现暗示 - 遗漏 - 上面显示的两种情况之间应该没有区别。）

（我发现的所有东西，充其量只是如何达到特定效果的食谱，但这些食谱对行为不一致的问题没有任何启示。这些解决方案基本上是肤浅的创可贴，因为他们不喜欢首先要解决导致问题的潜在缺乏理解。）

---

好的，这是上面提到的代码，正如所承诺的那样：

CSS

table

HTML

/* 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;}

Answer 1

因为that's what the spec dictates。

  

17.5表格内容的可视化布局

     

内部表格元素生成带有内容和边框的矩形boxes。细胞也有填充物。 内部表格元素没有边距。

_{（强调补充）}

Answer 2

因为它在表中设置使用：

table{
    border-spacing: 5px; 
}

等。

Answer 3

显然你运气不好。堆栈上的answer溢出链接到某些W3 docs，它排除了“内部表元素”的边距。