在div边界上填充

Question

我想将填充放在css边框上。将它拉入div内，远离边缘。这可能是使用css（css3很好，webkit）。

这是设计。

我通过在div中放置一个div来做到这一点，然后给内部div添加一个边框。我想让标记变得苗条，所以我想只使用一个div，如果可行的话。

谢谢。

Answer 1

您应该可以使用CSS outline属性执行此操作：

<style>
.outer {
       outline: 2px solid #CCC;
       border: 1px solid #999;
       background-color: #999;
       }
</style>

<div class="outer">
example
</div>

Answer 2

您可以使用outline属性代替边框：

div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;    
}

http://jsfiddle.net/H7KdA/

Answer 3

不幸的是，如果不添加另一个div，我认为你不能只用CSS做到这一点。

您的设计越复杂，您就越有可能需要无关的HTML标签。

您的其他（也不是很好）选项是图像背景，或者如果它以某种方式让您感觉更好，您可以使用JQuery添加元素客户端，从而保持服务器端文件的“纯度”。

祝你好运。

Answer 4

你可以通过创建一个带有你想要的边框的内部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>

Answer 5

不，那是不可能的。填充，边距和边框都是元素的一部分，你不能给边框填充或边距边缘。

也许如果你发布一个你想要做的事情的例子，我们可以提出替代解决方案吗？

-update- 看看你的例子，我担心它仍然不可能，至少不是只有一个div。我也不是divitis的粉丝，但在这种情况下额外的div可能是最好的选择。

Answer 6

填充边框（将其与边缘分开）称为“边距”：有关详细信息，请参阅Box model。