Question

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

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

Answer 2

尝试包装它：

HTML

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

CSS

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

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

这样你就可以分别控制两个。

Answer 3

不，因为当您使用border或outline时，CSS定义将绘制线条，以便填充在内部。

所以你需要考虑用其他东西替换填充。有几种可能的方法，它们的可行性取决于问题中未公开的背景。一种方法是使用定位，尤其是您正在使用定位：用以下内容替换padding-right: 15px：

left: 0; right: 15px;

Answer 4

似乎用padding-right替换margin-right不会影响图片上的边框，如this JSFiddle所示。

因此CSS成为：

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

在此处留下这个答案，以防将来有人需要快速简便的解决方案。

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

4 个答案: