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

Question

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

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

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

Answer 1

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

Answer 2

可能使用伪元素（后） 我已在原始代码中添加了

position:relative

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

Answer 3

只需在它周围包裹另一个div，它有边框和你想要的填充。

Answer 4

您通常使用填充来添加边框和内容之间的距离。However，背景在填充上展开。

您仍然可以使用nested element。

html：

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

outter div：

border-style: ridge;
border-color: #567498;
border-spacing:10px;
min-width: 100px;
min-height: 100px;
float:left;

内部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%
        );}

答案 4 :(得分：1)

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

因此，在这种情况下，您可以使用background-clip: content-box;或outline-offset

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

答案 5 :(得分：-1)

您可以尝试添加<hr>并设置样式。它是一个最小的标记更改，但似乎需要更少的CSS，以便可能做到这一点。

小提琴：

http://jsfiddle.net/BhxsZ/

Answer 5

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

因此，在这种情况下，您可以使用background-clip: content-box;或outline-offset

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

Answer 6

您可以尝试添加<hr>并设置样式。它是一个最小的标记更改，但似乎需要更少的CSS，以便可能做到这一点。

小提琴：

http://jsfiddle.net/BhxsZ/