两个div之间的空间

Question

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

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

由于我能想到的唯一解决方案是复杂的/涉及硬编码的价值，我希望有人可以想到一个聪明，简单的解决方案来解决这个问题。

详细信息：有时候这些div会独立出现，而且很少会出现这种情况。

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

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

甚至更好地使用adjacent sibling selector。使用以下选择器，您可以在一个规则中覆盖您的案例：

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

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

Answer 2

如果您不需要IE6的支持：

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

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

Answer 3

为什么不使用保证金？你可以将所有种类的边距应用于元素。不只是它周围的整个边缘。

你应该使用css类，因为它引用了多个元素，你可以将id用于你想要特别不同的那些

即：

<style>
.box { height: 50px; background: #0F0; width: 100%; margin-top: 10px; }
#first { margin-top: 20px; }
#second { background: #00F; }
h1.box { background: #F00; margin-bottom: 50px;  }
</style>

<h1 class="box">Hello World</h1>
<div class="box" id="first"></div>
<div class="box" id="second"></div>​

这是一个jsfiddle示例：

• http://jsfiddle.net/baXmu/2/

参考：

• http://www.html.net/tutorials/css/lesson10.php

Answer 4

当然，DIV本身缺乏任何有用的意义，除了分裂。

最好的做法是为他们添加一个有意义的类名，并在CSS中设置他们各自的边距。

<h1>Important Title</h1>
<div class="testimonials">...</div>
<div class="footer">...</div>

h1 {margin-bottom: 0.1em;}
div.testimonials {margin-bottom: 0.2em;}
div.footer {margin-bottom: 0;}