html - 我可以在不受填充/边距影响的 html 元素周围放置边框吗？

Question

情况:我有一张图片，右边有 15 像素的填充，我需要在图片周围添加边框或轮廓。问题是边框和轮廓都将放置在填充的外边缘，从而产生间隙。有没有一种方法可以添加边框或轮廓来忽略填充并拥抱图像本身？

Example

HTML:

<div class="">
    <img class="" src="http://www.emoticonswallpapers.com/avatar/art/TV-Test-Card.jpg" alt="">
</div>

CSS:

div {
    position: relative;
    width: 50%;
}
img {
    position: absolute;
    width: 100%;
    padding-right: 15px;
    outline: 1px solid #000;
}

Answer 1

这样就可以了，除非你想减少 div 标签。

<div class="outerawesomediv">
  <div class="innerawesomediv">
    <img class="" src="http://www.emoticonswallpapers.com/avatar/art/TV-Test-Card.jpg" alt="">
  </div>
</div>

.outerawesomediv
{
 position:relative;
 width:50%;
}
.innerawesomediv
{
 padding-right:15px;
}
img
{
 position:absolute;
 width:100%;
 outline:1px solid #000000;
}