css 边框溢出到文本

Question

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

我的代码是这样的:

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)，它也溢出到文本。

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

谢谢

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

并且会做你正在寻找的。