Css 边框和内容之间的间距？/与内容的边界距离？

是否可以增加边框与其内容之间的距离？ 如果可能，只需在此处执行：

我计划做的是在内容周围放置一个光晕（使用一个距离为0px/0px的阴影），然后在离光晕几像素的地方放置一个边框

---

注意：我已经决定改为使用插入阴影和边框，它看起来更好，但感谢您的回答：3

只需在它周围环绕另一个div，它有您想要的边框和填充。

添加填充。填充元素将增加其内容和边框之间的空间。但是，请注意，框阴影将从边框外部开始，而不是从内容开始，这意味着您不能在阴影和框之间留出空间。或者，您可以在元素上使用：before或：after伪选择器来创建一个稍大的框，将阴影放置在该框上，例如：

您通常使用填充来增加边框和内容之间的距离。背景分布在填充上

你仍然可以用它

html:

<div id="outter">
    <div id="inner">
        test
    </div>
</div>

内分区：

width: 100px;
min-height: 100px;
margin: 10px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(39,54,73)),
    color-stop(1, rgb(30,42,54))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(39,54,73) 0%,
    rgb(30,42,54) 100%
        );}

---

您可以尝试添加一个

并设置其样式。这是一个最小的标记更改，但似乎需要较少的css，这样可能会达到效果

小提琴：

---

可以使用伪元素（后面）。

---

我已经在原始代码中添加了一个如果您对该元素有背景，那么添加填充将是无用的

position:relative 因此，在这种情况下，您可以使用或

说明：

---

如果您使用包装器，那么将背景和边框分开就很简单了。但是，如果您想要为具有背景的同一元素设置样式，则无论您添加多少填充，背景和边框之间都不会有空格，除非您使用背景剪辑或轮廓偏移

意识到这是非常古老的。。。即使你提出了一个解决方案，使问题得到了解决，但如果它令人满意地回答了最初的问题，那么接受一个答案也是值得的。你能解释一下这是如何工作的吗？我的意思是，为什么在

#content

中保留

位置：relative

，在

#content:after

中保留

位置：absolute

会导致这种效果？ position:relative

#content{
  width: 100px;
  min-height: 100px;
  margin: 20px auto;
  border-style: ridge;
  border-color: #567498;
  border-spacing:10px;
  position:relative;
  background:#000;
}
#content:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: red 2px solid;
}