第7章曾經討論過，網頁設計人員可以為元素設置負外邊距。這會導致元素框超出其父元素，或者與其他元素重疊，但并不違反框模型?？紤]以下規(guī)則：

div{border:1px dotted gray;margin:1em;}

p{margin:1em;border:1px dashed silver;}

p.one{margin:0-1em;}

p.two{margin:-1em 0;}

在第一個例子中，根據數學計算，這個段落的width計算值加上其左右外邊距剛好等于父元素div的width。所以，這個段落最后將比其父元素寬2em，但從數學角度講實際上并沒有更“寬”。在第二個例子中，負的上下外邊距實際上增加了元素的height計算值，將其上下外邊界向外移，這就與它之前和之后的段落發(fā)生了重疊。

網頁設計結合使用正負外邊距會很有用。例如，可以創(chuàng)造性地結合正負外邊距，使一個段落“超出”其父元素，或者可以創(chuàng)建一種蒙德里安風格的效果，有多個重疊或隨機放置的框。

div{background:silver;border:1px solid;}

p{margin:1em;}

p.punch{background:white;margin:1em-1px 1em 25%;

border:1px solid;border-right:none;text-align:center;}

p.mond{background:#333;color:white;margin:1em 3em-3era-3em;}

由于“mond”段落的下外邊距為負，其父元素的底端會向上拉，使得段落超出其父元素的底端。

說到上下外邊距，網頁設計人員還要記住重要的一點，正常流中垂直相鄰外邊距會合并，這個內容在上一章已經介紹過。外邊距合并在設置了樣式的每一個文檔中都在起作用。例如，以下是一個簡單的規(guī)則：

p{margin:15px 0;}

這會導致一個段落跟在另一個段落后，二者之間有15像素的“外邊距空間”。如果外邊距沒有合并，那么這兩個相鄰段落之間應當有30像素的空間，但是網站建設人員不希望這樣。

不過，這確實說明設置外邊距時必須小心。你很有可能想去掉標題和下一段之間的空間。由于HTML文檔中的段落都有一個上外邊距，如果只是將標題的下外邊距設置為0是不夠的，還必須去掉段落的上外邊距。利用CSS2的相鄰兄弟選擇器很容易做到這一點：

h2{margin-bottom:0;}

h2+p{margin-top:0;}

遺憾的是，瀏覽器對相鄰兄弟選擇器的支持還很有限（在寫作本書時），大多數用戶都會看到標題與其下一段之間有1em的間隔。不使用網站建設CSS2選擇器也可以得到所要的效果，不過要麻煩一些：

h2{margin-bottom:0;}

p{margin:0 0 1em;}

這會去除所有段落的上外邊距，不過由于段落都還有一個1em的下外邊距，所以還會保留所要的段間間隔，如圖8-14所示。

這樣能正常工作，因為段落之間的1em間隔是外邊距合并的結果。因此，如果去掉其中一個外邊距（在這里就是上外邊距視覺效果與保留該外邊距的效果是一樣的。