CSS 在 div 边框上填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3710360/
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
Padding on div border
提问by floatleft
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
我想在 css 边框上放置填充。将它拉到 div 内，远离边缘。这是否可以使用 css（css3 很好，webkit）。
Here is the design.
这是设计。
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
我通过在 div 内放置一个 div 来做到这一点，然后给内部 div 一个边框。我想让标记尽可能地纤细，所以如果可能的话，我只想使用一个 div。
Thank you.
谢谢你。
回答by Edd Turtle
You should be able to do this with the CSS outline property:
您应该可以使用 CSS 大纲属性执行此操作：
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
回答by aldebaran
Instead of borders, you may use outline property:
您可以使用轮廓属性代替边框：
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
回答by Jay
Unfortunately, without adding another div, I don't think you can do this with just CSS.
不幸的是，如果不添加另一个 div，我认为您无法仅使用 CSS 来做到这一点。
The more complicated your design gets, the more likely you will need extraneous html tags.
您的设计越复杂，您就越有可能需要额外的 html 标签。
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
您的另一个（也不是很好）选项是图像背景，或者如果它以某种方式让您感觉更好，您可以使用 JQuery 在客户端添加元素，从而保持服务器端文件的“纯度”。
Best of luck.
祝你好运。
回答by martins
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
你可以通过创建一个带有你想要的边框的内部 div 和一个带有 display: table 的外部 div 来做到这一点。像这样的东西：
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
回答by Stephan Muller
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
不，那不可能。填充、边距和边框都是元素的一部分，你不能给边框填充或边距一个边框。
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
也许如果您发布您正在尝试做的事情的示例，我们可以提出替代解决方案？
-update- Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.
-update- 看看你的例子，恐怕这仍然是不可能的，至少不是只有一个 div。我也不是 divitis 的粉丝，但在这种情况下，额外的 div 可能是最好的选择。
