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

Question

是否可以增加边框与其内容之间的距离？如果可能的话，就在这里做吧： JSFiddle

我打算做的是在内容周围放一个发光（使用距离为 0px/0px 的阴影），然后在距离发光几个像素处放置一个边框。

注意：我决定做一个嵌入阴影和一个边框，它看起来更好，但感谢您的回答：3

原文由 Henry-95 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加填充。填充元素将增加其内容和边框之间的空间。但是，请注意 box-shadow 将在 边界 之外 开始，而不是内容，这意味着您不能在阴影和框之间放置空间。或者，您可以在元素上使用 :before 或 :after 伪选择器来创建一个稍大的框来放置阴影，如下所示：http: //jsbin.com/aqemew/edit#source

原文由 Thomas Shields 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

我在原始代码中添加了一个

职位：相对

和一些保证金。

这是修改后的 JSFiddle：http: //jsfiddle.net/r4UAp/86/

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

原文由 fafchook 发布，翻译遵循 CC BY-SA 3.0 许可协议