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

Question

是否可以增加边界与其内容之间的距离？如果可能的话,就在这里做:JSFiddle

我打算做的是在内容周围放一个光晕(使用距离为0px/0px的阴影),然后将一个边框放在距离发光几个像素的位置.

注意:我决定做一个插入阴影和边框,它看起来更好,但感谢答案:3

Answer 1

添加填充.填充元素将增加其内容与其边框之间的空间.但是,请注意,箱阴影将开始外面的边界,而不是内容,这意味着你不能把阴影和箱体之间的空间.或者你可以使用:在元素之前或之后的伪选择器上创建一个稍微大一点的盒子,你可以放置阴影,如下所示:http://jsbin.com/aqemew/edit#source

Answer 2

如果您有该元素的背景，那么添加填充将毫无用处。

所以，在这种情况下，你可以使用background-clip: content-box; 或轮廓偏移

说明：如果使用包装器，那么将背景与边框分开会很简单。但是，如果您想对具有背景的同一元素进行样式设置，则无论您添加多少填充，背景和边框之间都不会存在空格，除非您使用background-clip或outline-offset

Answer 3

它可能使用伪元素（之后）。
我已经在原始代码中添加了一个

位置：相对

和一些保证金。
这是修改后的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;
}