如何只在 child 之间有边距而不在 CSS 中有 parent？

Question

这是我的目标：在child和[=48之间没有余量 =]和25px在childs之间的边距parent。见说明图：

我有这个 HTML 代码：

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

和这个 CSS:

#parent{
  width: 200px;
  height: 405px;
}

.child{
  width: 50px;
  height: 180px;
}

我的问题是：为每个 child 添加边距的最佳方法是什么？

我能做到：

<div class="child" style="margin: 0px 25px 25px 0px"></div>

但是我必须对每个 child 都这样做，当我有很多 Children 时，它会变得更难。

Answer 1

如果每行有 3 个 div 个孩子，那么您可以使用：

#parent > div:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)){
    margin-top: 25px;  /* add margin-top to every div except the first 3 */       
}

#parent > div:nth-of-type(3n+2){
     /* add margin-left and margin-right to every second div in every row */
     margin-left: 25px;
     margin-right: 25px;
}

JSFiddle

Answer 2

尝试将 display: flex 用于您的 parent div 和 align 以及 justify 您的内容 space-between。

在代码段中尝试：

#parent{
    width: 200px;
    height: 400px;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
}

.child{
    width: 50px;
    height: 180px;
    border: 1px solid lightcoral;
    display: inline-block;
}

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 3

我为你做了一个简单的例子。如果您的宽度是固定的，那么此方法将起作用。在这里查看 http://jsfiddle.net/91b2y94x/

    #parent{
  width: 423px;
  height: 370px;
  border: 3px solid red;
}

.child{
  width: 120px;
  height: 180px;
  background: Yellow;
  display: inline-block;
    margin-right: 25px;
    margin-left: 0px;
    padding:0px;
}
.child:nth-child(3n+3){
    margin-right: 0px;
}

Answer 4

就我个人而言，我会接受 Vucko 的回答，尽管如果您不必处理旧浏览器，Chris 会感觉更干净。

这绝对不是最好的方法，但如果由于某种原因其他选项无法在您的特定情况下使用，这可能是一种出路.

您可以在父项和子项之间使用另一个 div，并且具有负边距：

<div id="parent">
  <div id="cheat">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

和

#cheat{margin:-25px}

再说一次，除非你别无选择，否则不应这样做。

如何只在 child 之间有边距而不在 CSS 中有 parent？

How to only have margin between child and not with parent in CSS?

html

css

margin

parent-child