Html 在我在页面上的所有不同div之间留一个空白

大家好，我是新来的，我有一个关于html和css的问题

我试着在我所有的div之间，有一个相同大小的边距，也就是说，在每个div之间，都有一个边距，所有的边上都有相同的边距，甚至在div和页面边缘之间

*{
框大小：边框框；
保证金：0；
填充：0；
}
.家长{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
保证金：5px；
}
.儿童1{
弹性基准：200px；
背景：rgb（39,61,134）；
弹性：1.5；
边界半径：5px；
保证金：5px；
}
.儿童2{
弹性基准：200px；
背景：rgb（172,57,53）；
弹性：1；
边界半径：5px；
保证金：5px；
}
.儿童3{
弹性基准：200px；
背景：rgb（149,43,140）；
弹性：1；
边界半径：5px；
保证金：5px；
}
.儿童4{
弹性基准：200px；
背景：rgb（149143140）；
弹性：1；
边界半径：5px；
}
.儿童5{
弹性基准：200px；
背景：rgb（49,43,40）；
弹性：1；
边界半径：5px；
保证金：5px；
}
.F容器{
弹性基准：200px；
显示器：flex；
弯曲方向：行；
弹性：1；
保证金：5px；
}
.fjobcontact{
弹性基准：200px；
显示器：flex；
弯曲方向：立柱；
弹性：1；
保证金：5px；
}

只需将此添加到CSS：

.child1, .child2, .child3, .child4, .child5{
margin:5px; /*add whatever you want*/
}

*{
框大小：边框框；
保证金：0；
填充：0；
}
.child1、.child2、.child3、.child4、.child5{
保证金：5px；
}
.家长{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.儿童1{
弹性基准：200px；
背景：rgb（39,61,134）；
弹性：1.5；
边界半径：5px；
}
.儿童2{
弹性基准：200px；
背景：rgb（172,57,53）；
弹性：1；
边界半径：5px；
}
.儿童3{
弹性基准：200px；
背景：rgb（149,43,140）；
弹性：1；
边界半径：5px；
}
.儿童4{
弹性基准：200px；
背景：rgb（149143140）；
弹性：1；
边界半径：5px；
}
.儿童5{
弹性基准：200px；
背景：rgb（49,43,40）；
弹性：1；
边界半径：5px；
}
.F容器{
弹性基准：200px；
显示器：flex；
弯曲方向：行；
弹性：1；
}
.fjobcontact{
弹性基准：200px；
显示器：flex；
弯曲方向：立柱；
弹性：1；
}

---

您可以使用网格系统重建此结构。您将能够使用

网格间距


*{
框大小：边框框；
保证金：0；
填充：0；
}
.家长{
高度：100vh；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（6，1fr）；
栅隙：10px；
利润率：10px；
}
.parent>div{
边界半径：5px；
}
.儿童1{
网格柱：1/2；
网格行：1/3；
背景：rgb（39,61,134）；
}
.儿童2{
网格柱：2/3；
网格行：1/2；
背景：rgb（172,57,53）；
}
.儿童3{
网格柱：2/3；
网格行：2/3；
背景：rgb（149,43,140）；
}
.儿童4{
网格柱：1/3；
网格行：3/5；
背景：rgb（149143140）；
}
.儿童5{
网格柱：1/3；
网格行：5/7；
背景：rgb（49,43,40）；
}

您实际上在哪里都没有使用
页边距
！谢谢你的评论，我试着使用它，但是它对我不起作用，我还添加了我尝试做的。谢谢你的评论，但是你添加的不起作用，每个人的间距都不一样。而不是div，只指定div类。以上关于网格间隙的答案在Safari中不起作用。答案已更新。感谢您的回复，它可以工作，我的一些div的大小可能会有所不同，我如何支持它？您可以更改列大小，如
网格模板列：1fr 200px