Html 两个div之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11014724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Space between two divs
提问by Fewfre
My issue is that I have two (or more) divs of the same class, that need to be spaced from each other. I cannot directly use margins however, as the last or first element would also have the margin applied, which I do not want.
我的问题是我有两个（或更多）同一类的 div，它们需要彼此间隔开。但是，我不能直接使用边距，因为最后一个或第一个元素也会应用边距，这是我不想要的。
-Green is where I want the space
-Red is where I don't want it
-绿色是我想要空间的地方
-红色是我不想要的地方
As the only solutions I can think of are complicated / involve hard-coding a value, I am hoping that someone can think of a clever, simple solution to this problem.
由于我能想到的唯一解决方案是复杂的/涉及对值进行硬编码，我希望有人能想到一个聪明、简单的解决方案来解决这个问题。
Details: Sometimes these divs would be by themselves, and on a rare occasion floated.
详细信息：有时这些 div 会单独存在，并且在极少数情况下会浮动。
Any advice on how above ideas could be better, any new ideas, or just help in general would be greatly appreciated ;)
关于上述想法如何更好的任何建议，任何新想法或一般帮助将不胜感激；）
回答by Christoph
You can try something like the following:
您可以尝试以下操作：
h1{
margin-bottom:<x>px;
}
div{
margin-bottom:<y>px;
}
div:last-of-type{
margin-bottom:0;
}
or instead of the first h1rule:
或者代替第一条h1规则：
div:first-of-type{
margin-top:<x>px;
}
or even better use the adjacent sibling selector. With the following selector, you could cover your case in one rule:
甚至更好地使用相邻的兄弟选择器。使用以下选择器，您可以在一个规则中涵盖您的案例：
div + div{
margin-bottom:<y>px;
}
Respectively, h1 + divwould control the first div after your header, giving you additional styling options.
分别h1 + div控制标题后的第一个 div，为您提供额外的样式选项。
回答by Matt Coughlin
If you don't require support for IE6:
如果您不需要对 IE6 的支持：
h1 {margin-bottom:20px;}
div + div {margin-top:10px;}
The second line adds spacing between divs, but will not add any before the first div or after the last one.
第二行在 div 之间添加间距，但不会在第一个 div 之前或最后一个 div 之后添加任何间距。
回答by Michael Zaporozhets
Why not use margin? you can apply all kinds off margins to an element. Not just the whole margin around it.
为什么不使用保证金？您可以将各种外边距应用于元素。不仅仅是它周围的整个边缘。
You should use css classes since this is referencing more than one element and you can use id's for those that you want to be different specifically
您应该使用 css 类，因为它引用了多个元素，并且您可以将 id 用于那些您想要特别不同的元素
i.e:
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>?
Here is a jsfiddle example:
这是一个jsfiddle示例：
REFERENCE:
参考：
回答by Jason Hibbs
DIVs inherently lack any useful meaning, other than to divide, of course.
当然，除了划分之外，DIV 本质上没有任何有用的意义。
Best course of action would be to add a meaningful class name to them, and style their individual margins in CSS.
最好的做法是为它们添加一个有意义的类名，并在 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;}
