html - 两个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 之前或最后一个 div 之后添加任何间距。

Answer 3

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

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

IE：

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