项目之间有间距/间距的网格，但项目和容器之间没有

Question

所以我想创建一个网格，其中 children 是单独的网格方块。

但是，children 和 parent 之间有间距，这是我不想要的。我该如何删除它？

parent 上的负边距会移动整个内容，从而使它在页面上偏心。

目标是让整个事物响应，这就是我使用浮动和相对宽度的原因。

我希望它看起来像这样（10px 间距）：

+-----+--+-----+--+-----+--+-----+
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
+-----+  +-----+  +-----+  +-----+
|                                |
+-----+  +-----+                 |
|xxxxx|  |xxxxx|                 |
|xxxxx|  |xxxxx|                 |
|xxxxx|  |xxxxx|                 |
+--------------------------------+

#parent {
  width: 500px;
  height: 500px;
  background-color: #CCCCCC;
}

.child {
  box-sizing: border-box;
  /* So the padding expands inwards */
  padding: 5px;
  /* Replacement to margin so relative width works, spacing between children ends out to be 10px of course */
  width: 25%;
  height: 100px;
  float: left;
}

.child>div {
  /* This represents content of the child */
  width: 100%;
  height: 100%;
  background-color: #000000;
}

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

Answer 1

这样的事情怎么样：

.child { padding: 0 5px 5px 0;}
.child:nth-child(4n){ padding-right: 0;}

请参阅下面的工作演示：

#parent {
  width: 500px;
  height: 500px;
  background-color: #CCCCCC;
}

.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  float: left;
  padding: 0 5px 5px 0;
}

.child:nth-child(4n) {
  padding-right: 0;
}

.child>div {
  /* This represents content of the child */
  width: 100%;
  height: 100%;
  background-color: #000000;
}

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

Answer 2

这个怎么样：

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

    <style>
      #parent {
        width: 500px;
        height: 200px;
        background-color: #CCCCCC;
      }

      .child {
        box-sizing: border-box; /* So the padding expands inwards */
        width: 25%;
        height: 100px;
        float: left;
        padding:0px 5px 5px 0px;
      }
      .child:nth-child(4n) {
   
  padding-right: 0;
}
.child:nth-child(n+5) {
  padding:5px 5px 0px 0px;
}
      .child > div { /* This represents content of the child */
        width: 100%;
        height: 100%;
        background-color: #000000;
      }
    </style>

Answer 3

这个问题已经被 CSS Grid Layout 解决了。

网格提供grid-column-gap、grid-row-gap和grid-gap（shorthand），它们在网格项之间创建space，但不适用于项目和容器之间的区域。

10.1. Gutters: the grid-column-gap, grid-row-gap, and grid-gap properties

These properties specify the gutters between grid rows and grid columns, respectively.

#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-auto-rows: 120px;
  grid-gap: 10px;
  width: 510px;
  background-color: #cccccc;
}

.child {
  background-color: #000000;
}

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

有关上述其他网格属性如何工作的说明，请参阅此 post：CSS-only masonry layout but with elements ordered horizontally

对于 CSS 网格浏览器支持，请参阅此处：http://caniuse.com/#search=grid

项目之间有间距/间距的网格，但项目和容器之间没有

A grid with spacing / gutters between items, but not between items and the container

html

css

grid-layout

css-grid

这样的事情怎么样：

请参阅下面的工作演示：