两个div之间的空间 [英] Space between two divs

问题描述

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

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.

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

-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.

详细信息:有时，这些div可能是单独存在的，并且在极少数情况下会浮动.

Details: Sometimes these divs would be by themselves, and on a rare occasion floated.

任何有关上述想法如何更好地提出的建议，任何新想法或仅对总体上有帮助的建议都将不胜感激;)

Any advice on how above ideas could be better, any new ideas, or just help in general would be greatly appreciated ;)

推荐答案

您可以尝试以下操作:

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

甚至更好地使用相邻的兄弟选择器.使用以下选择器，您可以按照一条规则来处理您的案件:

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

分别， h1 + div 将控制标题之后的第一个div，为您提供其他样式选项.

Respectively, h1 + div would control the first div after your header, giving you additional styling options.

这篇关于两个div之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！