在元素及其边框之间创建间距

Question

我正在尝试在元素和最外边框之间创建一个间距.(编辑:他想要在正确的元素和盒子模型框的外部之间做两个边界.这使他有空间使用边距,边框和填充来实现他的目标).到目前为止,我在谷歌的搜索并没有解决这个问题.

我试图避免使用图像来实现这一点.

Answer 1

你想要填充.

这是一个链接到一个网站,演示元素的"边距","边框"和"填充".http://css-tricks.com/the-css-box-model/

然而,IE的盒子模型和"世界其他地方"的渲染曾经存在问题,因为IE使用不同的机制来确定"整体宽度".如果您计划支持IE7(两代以上)或更早版本,您需要了解这一点.

我认为使用"世界其他地方"的方式将足以满足您的需求.

对于世界其他地方(以及该链接何时不再起作用),这是同一图表的ascii版本:

+----------------------------+
|                            |
|          margin            |
|                            |
|   *******border**********  |
|   *                     *  |
|   *      padding        *  |
|   *                     *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *   ---ELEMENT-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+

Answer 2

你可以用插入边框做这样的事情

.box {
    background-color: #e1309e;
    border: 10px solid #6a51d2;
    height: 80px;
    width: 80px;
    box-shadow: 0 0 0 10px #f3f5f6 inset;
    box-sizing: border-box;
 }

<div class="box"></div>

JSFiddle 演示

Answer 3

我最终使用了多重 css 技术（此处），并用于border-color: transparent在元素与其边框之间创建透明间距。