缩小图像及其底层文本之间的间距

Question

我有以下显示4张图像的图像，每个图像下面都有一个<a>链接，如下所示：-

问题是，如果<a>文本仅跨越一行，则图像和链接之间将浪费一些空间，如上图所示（图片1和4），而如果链接文本跨越2线（图2和3），则此空间将被轻轻占据。不管链接文本跨越1或2行，我都可以强制消除空格吗？

这是用于构建单个<div>

的HTML

<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>

Answer 1

您需要开始使用CSS网格

    .wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 200px 200px;
        grid-template-areas: "image1 image2" "image3 image4";
        grid-gap: 0px;
    }
    img{
    width: 300px;
    height: auto;
    }
    .centered {
    color: orangered;
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    }
    .image1{
    position: relative;
    grid-area: image1;
    overflow: hidden;
    border: 2px solid white;
    background-color: black;
    }
    .image2{
    position: relative;
    grid-area: image2;
    overflow: hidden;
    border: 2px solid white;
    background-color: black;
    }
    .image3{
    position: relative;
    grid-area: image3;
    overflow: hidden;
    border: 2px solid white;
    background-color: black;
    }
    .image4{
    position: relative;
    grid-area: image4;
    overflow: hidden;
    border: 2px solid white;
    background-color: black;
    }
    

<div class="wrap">
    <div class="image1">
    <div class="centered">Centered</div>
    <img src="https://i.imgur.com/oszfvKQ.jpg">
    </div>
    <div class="image2">
    <div class="centered">Centered</div>
    <img src="https://i.imgur.com/c1OFZbI.jpg">
    </div>
    <div class="image3">
    <div class="centered">Centered</div>
    <img src="https://i.imgur.com/gHaJUA8.jpg">
    </div>
    <div class="image4">
    <div class="centered">Centered</div>
    <img src="https://i.imgur.com/AhxnhRC.jpg">
    </div>
  </div>

使用CSS网格https://www.w3schools.com/css/css_grid.asp，您所做的一切都是可能的 要么 https://youtu.be/FEnRpy9Xfes