两个div之间的空间

Question

我的问题是我有两个（或更多）同一类的 div，它们需要彼此间隔开。但是我不能直接使用边距，因为最后一个或第一个元素也会应用边距，这是我不想要的。

-绿色是我想要空间的地方

-红色是我不想要的地方

由于我能想到的唯一解决方案很复杂/涉及对值进行硬编码，我希望有人能想出一个聪明、简单的解决方案来解决这个问题。

详细信息：有时这些 div 会单独存在，并且在极少数情况下会浮动。

任何关于上述想法如何更好的建议，任何新想法，或只是一般的帮助，将不胜感激；）

原文由 Fewfre 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试以下操作：

 h1{
   margin-bottom:<x>px;
}
div{
   margin-bottom:<y>px;
}
div:last-of-type{
   margin-bottom:0;
}

或者代替第一个 h1 规则：

 div:first-of-type{
   margin-top:<x>px;
}

甚至更好地使用 相邻的兄弟选择器。使用以下选择器，您可以在一个规则中涵盖您的案例：

 div + div{
   margin-bottom:<y>px;
}

分别地， h1 + div 将控制标题后的第一个 div，为您提供额外的样式选项。

原文由 Christoph 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您不需要对 IE6 的支持：

 h1 {margin-bottom:20px;}
div + div {margin-top:10px;}

第二行在 div 之间添加间距，但不会在第一个 div 之前或最后一个 div 之后添加任何间距。

原文由 Matt Coughlin 发布，翻译遵循 CC BY-SA 3.0 许可协议