html - 减少图像与其底层文本之间的空间

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 grid

    .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