Question

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

我试图避免使用图像来实现这一目标。

Answer 1

你想要填充。

以下是指向元素的“边距”，“边框”和“填充”的网站链接。 http://css-tricks.com/the-css-box-model/

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

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

对于世界其他地方（以及该链接何时不再起作用），这是同一图表的ascii版本：

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

Answer 2

你可以做两件事之一。您编写的内容将决定您使用的内容。

可以在容器（外部）元素中添加填充，以将元素推离其边界。

可以在内部元素上使用边距将其自身推离容器。

我的经验是，如果您正在为网络设计，请使用其中一个，检查所有浏览器以确保您的间距正确。

但是，如果您要编写HTML电子邮件，则应使用保证金 - 在某些应用程序（Outlook 2007）中，Padding在某些情况下不起作用。

Answer 3

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

Answer 4

您可以使用插入边框

执行此类操作

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

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

Demo

Answer 5

可以使用backgroud剪辑：

div {
  border: 1px dotted black;
  padding: 5px;
  background: green;
  background-clip: padding-box;
}

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

5 个答案: