Html 如何获得flex容器中图像之间的垂直间隙

图像具有10px的水平间隙，但没有垂直间隙（列中图像之间的距离）

如何在

child

和

parent

之间添加此间隙而不使用填充/边距。我只需要图像之间的间隙，但需要两个方向的间隙

---

此外，图像没有固定的宽度和高度。

这可能是CSS网格而不是flexbox的一个用例：

.parent{
显示：网格；
网格模板列：重复（4，1fr）；
网格间距：10px；/*定义元素之间的距离*/
边框：1px实心；
}
.孩子{
高度：50px；
边框：1px纯红；
}

---

这可能是CSS网格而不是flexbox的一个用例：

.parent{
显示：网格；
网格模板列：重复（4，1fr）；
网格间距：10px；/*定义元素之间的距离*/
边框：1px实心；
}
.孩子{
高度：50px；
边框：1px纯红；
}

只需给出图像

边距底部：10px？

或最大宽度：25%+填充：5px+思维箱大小…有很多方法。每个图像的比例相同吗？只需给出图像

边距底部：10px？

或最大宽度：25%+填充：5px+思维箱大小…有很多方法。每个图像的比例相同吗？对op的ra不太确定tio真实图像。对象匹配可能也是一个线索；）@G-Cyr是的，但我怀疑它们的比率相同，因为它们需要在水平和垂直方向上具有相同的间隙；）从问题的最后一行我不太确定；）不太确定op的真实比率图像。对象匹配也可能是一个线索；）@G-Cyr是的，但我怀疑它们具有相同的比率，因为它们需要在水平和垂直方向上具有相同的间隙；）从问题的最后一行我不太确定；）

<div class='parent'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
</div>

.parent{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content: space-between;
}

.child{
display:block;
width:calc(25% - 10px);
margin:0 auto;
}