Html 我可以在赢得'；是否不受填充/边距的影响？

情况：我有一个图像，右边有一个15px的填充，我需要在图像周围加一个边框或轮廓。问题是，边界和轮廓都将放置在衬垫的外边缘，从而形成一个间隙。是否有一种方法可以添加边框或轮廓，从而忽略填充并拥抱图像本身

HTML:

---

这就做到了，除非您试图减少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;
}

奥特拉维索梅迪夫酒店
{
位置：相对位置；
宽度：50%；
}
.innerawesomediv
{
右侧填充：15px；
}
img
{
位置：绝对位置；
宽度：100%；
轮廓：1px固体#000000；
}

尝试包装它：

HTML

---

通过这种方式，您将分别控制这两者。

否，因为当您使用

边框

或

轮廓

时，线条由CSS定义绘制，因此填充在内部

<> P>所以你需要考虑用其他东西替换填充。有几种可能的方法，其可行性取决于问题中未披露的背景。一种方法是使用定位，尤其是在您仍在使用定位的情况下：将

padding right:15px

替换为以下内容：

left: 0;
right: 15px;

---

似乎用

margin right

替换

padding right

不会影响图像上的边框，如JSFiddle所示

因此CSS变成：

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

---

把这个答案留在这里，以防将来有人需要快速简便的修复。

我不确定这些天它的浏览器兼容性（或者它是否仍然是CSS3的一部分或已被删除），但一个潜在的有趣的关键字是CSS属性

框大小调整

。现在和将来都会解决这类问题。@steveax，如果您认为

框大小调整

解决了问题，请发布您的答案，但首先检查它是否有效。当然，这取决于哪个

框大小调整

模型处于活动状态。

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

.some {
    position: relative;
    width: 50%;
    background:#FEF;
}
img {
    position: absolute;
    width: 100%;

    outline: 1px solid #000;
}
.other {
    padding-right: 15px;
}

left: 0;
right: 15px;

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