到目前為止，看上去一切都很直接明了，你可能會奇怪前面為什么會說情況可能很復雜。外邊距還有一個方面很特殊：外邊距可以為負，這種設置是對的，完全可以將外邊距設置為負值。這么做會帶來一些有意思的效果（假設用戶代理完全支持這種負外邊距）。

注意：按照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。