当为带有网格区域的图像添加边距时，图像会折叠?

Question

我真的尝试为网格区域元素留出边距(4张图片( 我想在保持元素居中的情况下使边距右边距和左边距

我希望 4 张图片仍然位于中心，左边距和右边距！

网页代码

<div class="image">
<img class="one" src="images/pic03.jpg" alt="">
<img class="two" src="images/pic04.jpg" alt="">
<img class="three" src="images/pic01.jpg" alt="">
<img class="four"  src="images/pic05.jpg" alt="">
</div>

CSS的代码

.image {
min-width: 100%;
display: grid;
grid-template-areas: 
"o th"
"t f"
;
}
.image .one {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
grid-area: o;

}
.image .two {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
grid-area: t;
}

.image .three {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
grid-area: th;
}
.image .four {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
grid-area: f;
}

Answer 1

尝试网格框的"列间距"属性：

.image {
height:500px;
min-width: 100%;
display: grid;
grid-template-areas: 
"o th"
"t f";
column-gap: 4px;
}

您可以使用"row-gap"属性在顶部和底部留出空间。

看看这个。