元素内部的边框与边缘的空间答案

【问题标题】：Border inside the element with space with the edge元素内部的边框与边缘的空间
【发布时间】：2015-10-07 17:03:32
【问题描述】：

如何为元素内部的元素添加边框，并在边框和元素边缘之间留出空间？使用 CSS

类似的东西

谢谢

编辑：不能用图片作为背景，我希望它是一个img元素

【问题讨论】：

图片做背景怎么样？
@ShiguriAnemone' 不可能，因为图片可以从后端更改
你可以使用定位吗？像绝对的还是相对的？
最好将position:absolute 用于边框
@ShiguriAnemone' 我觉得用'relative'就可以了

标签： html css image border

【解决方案1】：

您可以在图像周围使用容器/包装器。

CSS

div {
    position: relative;
    display:inline-block;
}
div:before {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 0px 2px #fff;
    z-index:1;
    border: solid 10px transparent;
}

HTML

<div>
    <img src="http://i.stack.imgur.com/OGZXN.png" alt="image">
</div>

DEMO HERE

【讨论】：

之前使用的非常聪明的解决方案，我喜欢你没有添加额外的 html thx ！

【解决方案2】：

你现在可以尝试这样的事情了。

.img-container {
  position: relative;
}
.border {
  height: 154px;
  width: 219px;
  border: 4px solid yellow;
  position: absolute;
  top: 8px;
  left: 8px;
}

<div class="img-container">
  <img src="http://i.stack.imgur.com/OGZXN.png">
  <div class="border"></div>
</div>

【讨论】：

漂亮又干净，虽然我不喜欢添加额外的 div，但谢谢

【解决方案3】：

在以图像为背景的 div 中创建一个 div。给 div 你想要的边框和大小。而且因为 html 和 css 有时会很奇怪，所以您可能必须将 div 移动到具有负边距的图像上。希望对你有所帮助。

【讨论】：

img 是一个内联自闭合块，你不应该在其中添加块元素
我知道这是一种丑陋的解决方案，但它有效@tripleb
@tripleb 我编辑了答案。这样更好吗？
@M.Zuberbühler 不能使用背景图片，因为图片可以从后端更改

【解决方案4】：

试试这个...

这是链接：http://jsfiddle.net/aqm7kjbg/15/

HTML

<div>
 <img src="http://vignette1.wikia.nocookie.net/zimwiki/images/0/00/Gir.png/revision/latest?cb=20130712225209" width="200" />
 <span></span>
</div>

CSS

img{
  border: 5px solid gray;
}
span{
  position:relative;
  top:-200px;
  left:-188px;
  border: 5px solid red;
  padding:150px 80px 170px 80px;
}

【讨论】：