为什么我的CSS中的边距没有应用？

Question

我正在尝试创建一个日历，每天一个盒子，以小边距分隔。问题：未应用边距。我在日期周围添加了红色边框，正如您在the code中看到的那样，边界之间没有边距。我删除了所有无关的CSS，甚至暂时添加了一个!important属性（我讨厌，想想我多么绝望），无济于事。我绝对看不出我做错了什么，所以感谢任何帮助。

代码为here。

修改
我添加了hrunting的答案中提到的代码

#calendar table {
  border-collapse: separate;
  border-spacing: 2px 2px;
}

到my code，但似乎没有任何区别。 （我删除了红色边框。如果你有相应的日期框，你应该看看它的工作原理。）

Answer 1

阅读this StackOverflow answer here。

基本上，内部表格元素没有应用边距（并且填充不是您想要的，因为间距在边框内部而不是外部）。您需要使用border-spacing attribute along with the border-collapse attribute来获得所需的外观。

另外，请从cellspacing=0定义中删除<table> HTML属性。

Answer 2

表格单元格不能直接应用于它们的边距。您可以在此处阅读表格规格：http://www.w3.org/TR/CSS2/tables.html并查看表格单元格是否有自己的箱子模型。您可以像@Praveen建议的那样添加填充，但填充有局限性。例如，如果您想增加边框之外的空间无法使用。填充实际上增加了单元内的空间，因此具有不同的效果。

此问题可能重复：CSS Cell Margin

取自该问题：

  

那么“正确”的方式是什么？如果你想更换   表格的cellspacing属性，然后是border-spacing（带   border-collapse disabled）是一个替代品。但是，如果每个细胞   “边距”是必需的，我不确定这是怎么回事   使用CSS实现。我能想到的唯一的黑客就是使用填充   以上，避免细胞的任何样式（背景颜色，边框，   等）而是在单元格内使用容器DIV来实现这样的   样式。