CSS 边界和内容之间的空间？/ 与内容的边界距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7011203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Space between border and content? / Border distance from content?
提问by Henry-95
Is it possible to increase the distance between a border and its content? If it is possible, just do it on here: JSFiddle
是否可以增加边框与其内容之间的距离？如果可能，请在此处执行：JSFiddle
What I plan on doing is putting a glow around the content (using a shadow with 0px/0px distance) and then putting a border a couple of pixels away from the glow.
我打算做的是在内容周围放置一个光晕（使用距离为 0px/0px 的阴影），然后在距离光晕几个像素的地方放置一个边框。
NOTE: I have decided to do an inset shadow and a border instead, it looks better, but thanks for the answers :3
注意：我决定做一个插入阴影和一个边框，它看起来更好，但感谢您的回答：3
回答by Thomas Shields
Add padding. Padding the element will increase the space between its content and its border. However, note that a box-shadow will begin outsidethe border, not the content, meaning you can't put space between the shadow and the box. Alternatively you could use :before or :after pseudo selectors on the element to create a slightly bigger box that you place the shadow on, like so: http://jsbin.com/aqemew/edit#source
添加填充。填充元素将增加其内容与其边框之间的空间。但是，请注意，箱阴影将开始外面的边界，而不是内容，这意味着你不能把阴影和箱体之间的空间。或者，您可以在元素上使用 :before 或 :after 伪选择器来创建一个稍大的框，将阴影放在上面，如下所示：http: //jsbin.com/aqemew/edit#source
回答by fafchook
Its possible using pseudo element (after).
I have added to the original code a
它可能使用伪元素（之后）。
我在原始代码中添加了一个
position:relative和一些保证金。
这是修改后的 JSFiddle：http://jsfiddle.net/r4UAp/86/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;
}
回答by Swiftaxe
Just wrap another div around it, which has the border and the padding you want.
只需在它周围包裹另一个 div，它具有您想要的边框和填充。
回答by Kraz
You usually use padding to add distance between a border and a content.However, background are spread on padding.
您通常使用填充来添加边框和内容之间的距离。但是，背景分布在填充上。
You can still do it with nested element.
您仍然可以使用嵌套元素来做到这一点。
html :
html :
<div id="outter">
<div id="inner">
test
</div>
</div>
outter div :
外部 div ：
border-style: ridge;
border-color: #567498;
border-spacing:10px;
min-width: 100px;
min-height: 100px;
float:left;
inner 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%
);}
回答by GarryOne
If you have background on that element, then, adding padding would be useless.
如果您有该元素的背景，那么添加填充将毫无用处。
So, in this case, you can use background-clip: content-box;or outline-offset
因此，在这种情况下，您可以使用background-clip: content-box; 或轮廓偏移
Explanation: If you use wrapper, then it would be simple to separate the background from border. But if you want to style the same element, which has a background, no matter how much padding you would add, there would be no space between background and border, unless you use background-clipor outline-offset
说明：如果您使用包装器，那么将背景与边框分开会很简单。但是，如果您想为具有背景的相同元素设置样式，则无论您添加多少填充，背景和边框之间都没有空间，除非您使用background-clip或outline-offset
回答by grmdgs
You could try adding an<hr>and styling that. Its a minimal markup change but seems to need less css so that might do the trick.
您可以尝试添加一个<hr>和样式。它是一个最小的标记更改，但似乎需要更少的 css，因此可能会奏效。
fiddle:
小提琴：
