Html 项目之间具有间距/水槽的栅格，但项目与容器之间不具有间距/水槽

所以我想创建一个网格，其中子网格是单独的网格正方形

然而，我在孩子和父母之间有间隔，这是我不想要的。我如何删除它

父对象上的负边距会移动整个对象，从而使其在页面上分散

我们的目标是让整个东西都能响应，这就是为什么我使用浮动宽度和相对宽度

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

#父级{
宽度：500px；
高度：500px；
背景色：#中交；
}
.孩子{
框大小：边框框；
/*所以填充物向内膨胀*/
填充物：5px；
/*替换为边距，这样相对宽度可以工作，子对象之间的间距当然是10px*/
宽度：25%；
高度：100px；
浮动：左；
}
.child>div{
/*这表示子对象的内容*/
宽度：100%；
身高：100%；
背景色：#000000；
}

像这样的东西怎么样： 请参阅下面的工作演示：

#父级{
宽度：500px；
高度：500px；
背景色：#中交；
}
.孩子{
框大小：边框框；
宽度：25%；
高度：100px；
浮动：左；
填充：0 5px 5px 0；
}
.子项：第n个子项（4n）{
右边填充：0；
}
.child>div{
/*这表示子对象的内容*/
宽度：100%；
身高：100%；
背景色：#000000；
}

像这样的东西怎么样： 请参阅下面的工作演示：

#父级{
宽度：500px；
高度：500px；
背景色：#中交；
}
.孩子{
框大小：边框框；
宽度：25%；
高度：100px；
浮动：左；
填充：0 5px 5px 0；
}
.子项：第n个子项（4n）{
右边填充：0；
}
.child>div{
/*这表示子对象的内容*/
宽度：100%；
身高：100%；
背景色：#000000；
}

这个怎么样：

#母公司{
宽度：500px；
高度：200px；
背景色：#中交；
}
.孩子{
框大小：边框框；/*使填充向内展开*/
宽度：25%；
高度：100px；
浮动：左；
填充：0px 5px 5px 0px；
}
.子项：第n个子项（4n）{
右边填充：0；
}
.子项：第n个子项（n+5）{
填充：5px 5px 0px 0px；
}
.child>div{/*这表示子对象的内容*/
宽度：100%；
身高：100%；
背景色：#000000；
}

这个怎么样：

#母公司{
宽度：500px；
高度：200px；
背景色：#中交；
}
.孩子{
框大小：边框框；/*使填充向内展开*/
宽度：25%；
高度：100px；
浮动：左；
填充：0px 5px 5px 0px；
}
.子项：第n个子项（4n）{
右边填充：0；
}
.子项：第n个子项（n+5）{
填充：5px 5px 0px 0px；
}
.child>div{/*这表示子对象的内容*/
宽度：100%；
身高：100%；
背景色：#000000；
}

这是一个已由解决的问题

网格提供了

网格列间距

、

网格行间距

和

网格间距

（简称），它们在网格项目之间创建了空间，但不适用于项目和容器之间的区域

这些特性指定轴网行和轴网之间的檐槽 列，分别为

#父级{
显示：网格；
网格模板列：重复（自动填充，120px）；
网格自动行：120px；
栅隙：10px；
宽度：510px；
背景色：#中交；
}
.孩子{
背景色：#000000；
}

---

这是一个已由解决的问题

网格提供了

网格列间距

、

网格行间距

和

网格间距

（简称），它们在网格项目之间创建了空间，但不适用于项目和容器之间的区域

这些特性指定轴网行和轴网之间的檐槽 列，分别为

#父级{
显示：网格；
网格模板列：重复（自动填充，120px）；
网格自动行：120px；
栅隙：10px；
宽度：510px；
背景色：#中交；
}
.孩子{
背景色：#000000；
}

我不明白你的意思。如果你给孩子们一个绿色的背景，你会看到他们与家长齐平。是的，但是如果我直接使用他们，孩子们之间没有间隔。你在内部

div

s和

.child

div之间有间隔，但是

.child

和

.parent

之间没有间隔。你可能需要更清楚地描述这个问题。我不明白你的意思。如果你给孩子们一个绿色的背景，你会看到他们与家长齐平。是的，但是如果我直接使用他们，孩子们之间没有间隔。你在内部

div

s和

.child

div之间有间隔，但是

.child

和

.parent

之间没有间隔。您可能需要对问题进行更清晰的描述。这似乎是最好的解决方法。谢谢你的帮助^^看来这是最好的办法。谢谢您的帮助^^我已经看到了网格布局功能，但是对它的支持很少。我已经看到了网格布局功能，但是对它的支持很少。

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

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