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

问题描述

| 我正在尝试在元素与其最外边界之间创建一个间距。 （编辑：他想在适当的元素与框模型框的外部之间做两个边界。这给他提供了使用边距，边界和填充实现目标的空间）。到目前为止，我在Google和此处的搜索都无法解决此问题。 我试图避免使用图像来实现这一目标。     

解决方法

您要填充。 这是指向一个站点的链接，该站点演示元素的\“ margin \”，\“ border \”和\“ padding \”。 http://css-tricks.com/the-css-box-model/ 但是，IE渲染盒子模型和“世界其余部分”曾经存在问题，因为IE使用了不同的机制来确定“总宽度”。您需要了解，如果您计划支持IE7（两代或更旧）。 我想象使用“世界其他地区”的方式足以满足您的需求。 对于世界其他地区（以及当该​​链接不再起作用时），以下是同一图表的ascii版本：

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

    ,您可以做2件事情之一。您要编码的内容将决定您使用的内容。 可以将填充添加到容器（外部）元素，以将元素向内推离其边界。 可以在内部元素上使用边距以将自身推离容器。 我的经验是，如果您是为Web设计的，请使用其中一种，并在所有浏览器中签入以确保您的间距正确。 但是，如果要为HTML电子邮件编码，则应使用“边距”-在某些应用程序（Outlook 2007）中，在某些情况下无法使用填充。     ,我最终使用了多CSS技术（在这里），并使用

border-color: transparent

在元素及其边框之间创建了透明的间距。     ,您可以使用嵌入边框执行类似的操作

<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;}

演示版