Html 减少图像与其基础文本之间的空间

下面是4张图片，每张图片下都有一个

问题是如果
您需要开始使用css网格


.wrap{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：200px 200px；
网格模板区域：“image1 image2”“image3 image4”；
栅隙：0px；
}
img{
宽度：300px；
高度：自动；
}
.居中{
颜色：橙色；
位置：绝对位置；
利润率最高：50%；
左边距：50%；
转换：翻译（-50%，-50%）；
}
.image1{
位置：相对位置；
网格区域：图像1；
溢出：隐藏；
边框：2倍纯白；
背景色：黑色；
}
.image2{
位置：相对位置；
网格区域：图像2；
溢出：隐藏；
边框：2倍纯白；
背景色：黑色；
}
.image3{
位置：相对位置；
网格区域：图像3；
溢出：隐藏；
边框：2倍纯白；
背景色：黑色；
}
.image4{
位置：相对位置；
网格区域：图像4；
溢出：隐藏；
边框：2倍纯白；
背景色：黑色；
}


居中的
居中的
居中的
居中的
谢谢您的回复。现在我不想重新设计代码，我正在尝试修复当前代码。。。谢谢，我想如果问题是链接的长度，你可以用谷歌把它缩短，或者用html框输入链接并隐藏8个以上的字符？？？？？使用css网格更容易。
<div style="float: left;margin-left:0px;max-width:185px">
<img style="height:90px;width:185px" src="https://******.jpg" alt="ntitle">
<span style="font-size:9px;display:inline-block;line-height:9px">
<a target="_blank" href="http://*********">*********</a>
</span>
</div>