两个div之间的空间

Question

我的问题是我有两个(或更多)同一类的div,需要相互隔开.但是我不能直接使用边距,因为最后一个或第一个元素也会应用边距,这是我不想要的.

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

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

细节:有时这些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;
}

甚至更好地使用相邻的兄弟选择器.使用以下选择器,您可以在一个规则中覆盖您的案例:

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