是否有可以应用于 DIV 边距的“outdent”样式属性？答案

【问题标题】：Is there an 'outdent'-style attribute that can be applied to the margin of a DIV?是否有可以应用于 DIV 边距的“outdent”样式属性？
【发布时间】：2012-02-08 23:54:30
【问题描述】：

我正在使用 960.gs 网格系统创建一个 HTML 页面。我想在其中一个排水沟的中心画一条垂直虚线。

带有网格覆盖的页面（用红色标记的排水沟）：

带有模拟垂直虚线的页面：

但是，在 grid.css 样式表中，边距被强制为边距。当我为内容列添加边框时，它会立即关闭网格并破坏页面（最后一列 DIV 换行到下一行）。

我的解决方法是给整个页面一个垂直重复的 940 像素 x 2 像素的背景，包含点，这样就会产生虚线边框的错觉。

不过我更希望在代码中处理这个问题。

我的问题：是否有与text-indent 类似的行为类型？

与负值一起使用，这会拉回文本的开头，而不会影响 DIV 的大小、边距、填充或相邻的 DIV。

也许我可以对列的边框做类似的事情。

【问题讨论】：

标签： html css margins 960.gs

【解决方案1】：

与问题一样，我的解决方法 - 以及最终的解决方案 - 是为整个页面提供 940 像素 x 2 像素的垂直重复背景，其中包含点，这样就会产生虚线边框的错觉。

据我了解，这是我找到的最理想和最有效的解决方案。

【讨论】：

【解决方案2】：

您必须添加一个额外的div。当你想添加padding时也是如此。

<div class="container_12">
    <div class="grid_6">
        <div id="content">
            <!-- Your content -->
        </div>
    </div>
</div>

#content { 
    border-right: 1px dotted black;
    padding: 0 1em;
}

【讨论】：

我不太明白。在您的示例中，我可以看到 grid_12 设置了一个列，该列是整个容器的宽度。然后#content 会填满它的宽度，对吧？但在我的示例中，我有一个container_12，其中包含grid_3、grid_6 和grid_3。将border-right 添加到前两个网格中的任何一个都会立即影响最终网格。
只需在<div class="grid_x"> 中添加一个额外的div 并设置内部div 的样式。您不能为 grid_x 容器添加边框或填充，否则会破坏网格。
我的理解是grid_x内的div的边框不能超过grid_x的宽度。我要设置样式的排水沟在grid_x 之外。
您也必须使用填充。多年来我一直在使用 960gs，这通常是这样做的方法，如果你花一分钟时间你会在谷歌上找到什么。看看jsfiddle.net/Wppqc/1
啊！这不是我想要的（但谢谢）。您的解决方案的问题在于边框并不是真正位于网格真正排水沟的中间。例如，在第一个 grid_3 上，填充占用了列。（请参阅 [imgur.com/a/Vbefb]）而不是漂浮在排水沟的中心。澄清一下，我不想破坏我已经建立的网格，我想在它之上构建。