css边框溢出到文本答案

【问题标题】：css border overflows to textcss边框溢出到文本
【发布时间】：2026-02-16 23:00:01
【问题描述】：

我正在尝试在我正在制作的画廊网格前面添加带有边框的标签作为图层。

我的代码是这样的：

HTML

<div class="wrap">
    <div class="grid-item25"> <a href="#" class="bordered">
            &nbsp;
        </a>

        <img src="http://placehold.it/400x400" />
        <a href="#" style="display:block;">test</a>        
    </div>
    <div class="grid-item25"> <a href="#" class="bordered">
            &nbsp;
        </a>
        <img src="http://placehold.it/400x400" />
        <a href="#" style="display:block;">test</a>
    </div>
</div>

CSS

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.wrap {
    max-width: 100%;
    width: 100%;
    background-color: black;
}
.wrap:after {
    content:"";
    display: table;
    clear: both;
}
.grid-item25 {
    max-width: 25%;
    min-height: 202px;
    float: left;
    display: block;
    padding: 5px;
    position: relative;
}
.bordered {
    text-decoration: none;
    position: absolute;
    z-index: 90000;
    border:1px solid white;
    left: 1rem;
    right: 1rem;
    top:1rem;
    bottom:1rem;
}

结果是这样的：http://jsfiddle.net/ditikos/7LGBD/，但问题是边框不是停留在图像底部（0.5rem），而是溢出到文本中。

有人可以帮助我理解为什么会发生这种情况，并且它没有停留在应有的位置吗？

谢谢

【问题讨论】：

是的，但已插入。如果没有文本，它会完美放置，但添加它会使绝对定位到整个网格高度（包括图像）。
你能试着在这里进一步解释你需要什么吗？我有一种感觉你在叫错树，但我无法从解释中看出你想要什么。如果您需要图像也是可点击的链接，请将嵌套在 html 中的内。
这就是 zeroworks 试图展示的。我正在尝试制作一个响应式图像，其边框会增长/缩小并且小于图像的宽度/高度

标签： css image grid border

【解决方案1】：

只需替换带边框的类：

.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;
}

并且会做你想要的。

【讨论】：

例如，如果文本是 4-5 行代码，或者必须重新配置，这是否可行？这是响应式网格的一部分，所以我很好奇（我没有使用百分比作为高度，因为它总是无法正确计算）。
我已经更新了...现在它可以根据您的需要增长。测试它从 .grid-item25 类替换 max-width。

【解决方案2】：

如果您为class bordered 提供height，问题就会得到纠正..

例如：

.bordered
 {
   height: 47%;
 }

小提琴是：http://jsfiddle.net/7LGBD/1/

这只是一个示例方式...如果您对此不感兴趣，请忽略..

【讨论】：