Html gap属性显示它'；它在MDN上不受支持。使用安全吗？

我有一个灵活的盒子，我想确保每个项目之间有一个最小的差距。我已经找到了该属性，但当我在MDN上查找该属性时，它表示除Firefox外，所有浏览器都不支持该属性

它可以在Firefox中使用，但在Chrome中似乎无法使用

是否有其他CSS属性可以用于其他浏览器，或者我应该坚持使用margin吗？我可以两者都用吗

#组间隙{
位置：绝对位置；
宽度：349px；
高度：14px；
左：0；
顶部：80px；
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
证明内容：之间的空间；
柔性包装：nowrap；
溢出：可见；
间隙：25px；/*测试*/
栅极间隙：50px；/*测试*/
}
#团体{
位置：绝对位置；
宽度：349px；
高度：14px；
左：0；
顶部：30px；
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
证明内容：之间的空间；
柔性包装：nowrap；
溢出：可见；
}
/*向类中添加动画*/
.组{
动画：调整2500毫秒线性0秒无限大；
}
/*尺寸-宽度转换*/
@关键帧调整大小{
0% {
宽度：72%；
}
37.5% {
宽度：72%；
}
50% {
宽度：50%；
}
87.5% {
宽度：50%；
}
100% {
宽度：72%；
}
}
/*向组添加边距以应用于组项目*/
.itemGap>*{
右边距：25px；
}
/*向组添加边距以应用于组项目*/
.itemGap>*：最后一个子项{
右边距：0；
}
/*在组周围添加大纲*/
.菜单{
轮廓：1px虚线rgba（0,0,0,35）；
}
#标签1{
位置：绝对位置；
左：0；
顶部：60px；
}
正文{
字体系列：Arial，无衬线；
字体大小：11px；
}

使用右边距对项目进行分组：
家
产品
产品
服务
关于
联系
具有间隙和栅格间隙的组：
家
产品
产品
服务
关于
关于
关于
联系

我认为这篇StackOverflow文章的最佳答案可能会对您有所帮助：）

---

TL；DR：“最干净”的方法是在容器上设置

padding:5px

，在子容器上设置

margin:5px

。这将在每个子级之间以及每个子级与父级之间产生10px的间距。

根据caniuse的说法，CSS网格间距以及其他网格属性在较新的浏览器中得到了很好的支持，只有少数例外

全球支持率91.89%

---

除了Firefox，其他浏览器似乎都不支持它

使用一个样式声明，在组项目中添加一个右边距（最后一个项目除外），似乎是可行的

CSS：

/* add a right margin on each item */
.itemGap > * {
    margin-right: 25px;
}

/* remove right margin on last item */
.itemGap > *:last-child {
    margin-right: 0;
}

将itemGap类添加到flex box组

正如@michael-b所言，这也适用于：

.itemGap > div + div {
    margin-left: 25px;
}

#组{
宽度：349px；
高度：14px；
左：0；
顶部：0px；
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
证明内容：之间的空间；
柔性包装：nowrap；
溢出：可见；
}
/*向类中添加动画*/
.组{
动画：调整2500毫秒线性0秒无限大；
}
/*尺寸-宽度转换*/
@关键帧调整大小{
0% {
宽度：82%；
}
37.5% {
宽度：82%；
}
50% {
宽度：50%；
}
87.5% {
宽度：50%；
}
100% {
宽度：82%；
}
}
/*向组添加边距以应用于组项目*/
.itemGap>*{
右边距：20px；
}
/*向组添加边距以应用于组项目*/
.itemGap>*：最后一个子项{
右边距：0；
}
/*在组周围添加大纲*/
.大纲{
轮廓：1px虚线rgba（0,0,0,35）；
}
正文{
字体系列：Arial，无衬线；
字体大小：11px；
}

家
产品
产品
服务
关于
联系

设置网格间距似乎对我没有任何帮助（参见示例）。我现在一直在使用flexbox。如果您想以“良好支持”的方式使用gap，那么您需要使用grid。如果您不能离开flexbox显示，那么最好依赖于页边距或其他属性，或者尝试使用伪元素。谢谢。当有可能切换到电网时，我很高兴知道我能够可靠地使用它。谢谢。我在过去的某个时候发现了这一点，因为我对一些答案投了赞成票。很多答案都是用于包装网格项或切换到网格的。我正在寻找只使用Flexbox，并且在不支持gap的情况下有一个回退。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-@谢谢你的反馈。我确实考虑过，但不抄袭的原因是，这是一个相当长的答案，我不想翻页。这个页面还是新的，所以我对我发布的内容很小心，但我会马上编辑它。：）您必须使用

CSS

Prefixer来支持浏览器。另外，

grid gap

或

gap

在父级设置

显示

属性

flex

或

grid

时将使用不同的方式。当父级

display

property

flex

时，则

grid gap

或

gap

属性将与父元素一起工作；当

display

property

grid

时，则

grid gap

属性将与子元素一起工作。这仍然是实验性的。不要在生产站点上使用它。这个问题是“如果gap属性在2019年末受支持，如果不受支持，则是安全的替代方案”。链接的问题是关于如何在flexbox或网格项之间添加间隙。您只需使用一行即可简化CSS：

.itemGap>div+div{margin left:25px}

。