到目前为止，看上去一切都很直接明了，你可能会奇怪前面为什么会说情况可能很复杂。外边距还有一个方面很特殊：外边距可以为负，这种设置是对的，完全可以将外边距设置为负值。这么做会带来一些有意思的效果（假设用户代理完全支持这种负外边距）。

注意：按照CSS网站建设规范，用户代理不要求完全支持负外边距。规范指出：“外边距属性允许为负值，不过可以有一些特定于具体实现的限制。”不过在写作本书时，当前浏览器中这种限制很少（几近没有）。

要记住，网页设计中7个水平属性的总和要等于父元素的width。只要所有属性都是大于或等于0的，元素就不会大于其父元素的内容区。不过，考虑以下标记，其结果如图7-10所示：

div {width:400px; border: 3px solid black;}

p.wide {margin-left: l0px; width: auto; margin-right:-50px;}

图7-10：通过指定负外边距得到更宽的子元素

不错，子元素确实比其父元素还宽！数学计算并没有错误：

10px + 0 + 0 + 440px + 0 + 0 - 50px = 400px

440px是width: auto的实际计算值，需要这样一个数与等式中余下的值相抵（从而使总和为400px）。尽管这导致子元素超出了其父元素，但并没有违反规范，因为7个属性值加在一起仍等于所需的总宽度。网页设计中，这在语义上有些牵强，但确实是合法的行为。

下面再加上一些边框：

div {width: 400px; border: 3px solid black;}

p.wide {margin-left: l0px; width: auto; margin-right:-50px; border: 3px solid gray;}

这样一来，计算出的width值会减少：

10px + 3px + 0 + 434px + 0 + 3px - 50px = 400px

如果还要设置内边距，width值会进一步减少。

与此相反，还有可能将auto右外边距计算为负值。如果其他属性的值要求右外边距为负，以便满足元素不能比其包含块更宽的需求（译注1）[1]，就会出现这种情况。考虑以下规则：

div {width: 400px; border: 3px solid black;}

p.wide {margin-left: 10px; width: 500px; margin-right: auto; border: 3px solid gray;}

等式如下：

10px + 3px + 0 + 500px + 0 + 3px - 116px = 400px

右外边距计算为-116px，即使为它指定了另一个值（即所有水平属性都指定为特定值，而不是auto），由于元素水平属性过分受限时有一个规则，要求重置右外边距，这也会得到一个负右外边距。此时右外边距重置为所需的值，以保证元素水平属性的总和等于其父元素的内容宽度（不过，从右向左读的语言例外，对于这些语言，将重置左外边距）。

下面考虑另一个例子，如图7-11所示，这里左外边距设置为负值：

div {width: 400px; border: 3px solid black;} 

p.wide {margin-left:-50px; width: auto; margin-right: l0px; border: 3px solid gray;}

如果左外边距为负，不仅段落会超出div的边框，还会超出浏览器窗口本身的边界！

注意：网页设计中要记住，内边距、边框和内容宽度（及高度）绝对不能为负。只有外边距能小于0。