2

在过去的几个小时里，我一直在试图理解为什么元素的 margin CSS 属性（至少）td基本上被忽略了。

例如，这个小提琴div显示了一个使用元素的表格行的“模拟” ，然后是一个table带有单个tr. （我在这篇文章的末尾给出了所有这些的完整代码。）div模拟 a 的tr已被赋予 class TR，同样，div模拟tds 的 s 已被赋予 class TD。CSS fordiv.TR已尽可能接近 for （唯一的例外是那些在这种情况下tr不适用的 CSS 指令）。同样，和tr的 CSS应该几乎相同。尤其是：div.TDtd

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和td元素的 CSS 规范具有相同的边距、边框和填充规范，并且具有相同尺寸的内容。然而，如下图所示，只有div.TD元素显示指定的边距和边框。对于td，这两个维度实际上都是 0。（同样令人费解的是，为div.TR元素指定的边框是可见的，但不是为tr元素指定的相同的边框。）

结果

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

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

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

（我发现的一切充其量只是如何达到特定效果的秘诀，但这些秘诀并没有说明行为不一致的问题。这样的解决方案基本上是肤浅的创可贴，因为它们不能解决问题首先导致问题的潜在缺乏理解。）

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

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>
4

3 回答 3

3

Because that's what the spec dictates.

17.5 Visual layout of table contents

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

(emphasis added)

于 2013-08-28T20:23:44.263 回答
0

因为它是在表中设置的使用：

table{
    border-spacing: 5px; 
}

之类的。

于 2013-08-28T20:22:57.953 回答
0

显然你运气不好。这个关于堆栈溢出的答案链接到一些W3 文档，这些文档排除了“内部表格元素”的边距。

于 2013-08-28T20:25:47.350 回答