css边框溢出到文本

我试图添加一个标签与边界作为一个层前面的画廊网格我正在做

我的代码是：

HTML

结果是这样的：但问题是边框不是停留在图像的底部（0.5rem），而是溢出到文本中

有人能帮助我理解为什么会发生这种情况，而它并没有停留在它应该呆的地方吗

---

谢谢

只需替换带边框的类：

.bordered {
    text-decoration: none;
    position: absolute;
    z-index: 90000;
    border:1px solid white;
    left: 1rem;
    right: 1rem;
    top:1rem;
    bottom:1rem;
    margin: 0 0 1.5rem 0;
}

---

并且将执行您所需的操作。

如果您为带边框的

类提供
高度
，问题将得到纠正

例如：

.bordered
 {
   height: 47%;
 }

小提琴是：

这只是一个示例……如果您对此不感兴趣，请忽略。
是，但插入。如果没有文字，它可以完美地放置，但是添加文字会使整个网格高度（包括图像）处于绝对位置。您能尝试进一步解释一下您需要什么吗？我有种感觉你在胡说错树，但我无法从解释中看出你想要什么。如果你还需要一个图像作为一个可点击的链接，那么就在html的内部嵌套。这正是zeroworks试图展示的。我正在尝试制作一个响应图像，其边框会变大/缩小，并且小于图像的宽度/高度。例如，如果文本是4-5行代码，这会起作用吗？还是必须重新配置？这是响应网格的一部分，所以我很好奇（我没有使用百分比作为高度，因为它总是无法正确计算）。我已经更新了。。。现在，它会根据需要增长。从
.grid-item25
类中替换
最大宽度
进行测试。
.bordered {
    text-decoration: none;
    position: absolute;
    z-index: 90000;
    border:1px solid white;
    left: 1rem;
    right: 1rem;
    top:1rem;
    bottom:1rem;
    margin: 0 0 1.5rem 0;
}

.bordered
 {
   height: 47%;
 }